Merge branch 'vue2.x-webpack5.x' of https://github.com/yxw007/vue2.x-…

…webpack.x into vue2.x-webpack5.x

.eslintrc.js

@@ -1,37 +1,38 @@
 module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-  },
-  extends: ["plugin:vue/recommended", "plugin:prettier/recommended"],
-  parser: "vue-eslint-parser",
-  parserOptions: {
-    ecmaVersion: 12,
-    sourceType: "module",
-    requireConfigFile: true,
-    ecmaFeatures: {
-      jsx: true,
-    },
-    vueFeatures: {
-      filter: true,
-      interpolationAsNonHTML: false,
-    },
-  },
-  plugins: ["vue"],
-  rules: {
-    "no-unused-vars": "error",
-    "vue/no-multiple-template-root": "error",
-    "prettier/prettier": [
-      "error",
-      {
-        endOfLine: "auto",
-      },
-    ],
-    "no-tabs": "off",
-  },
-  settings: {
-    "import/resolver": ["node"],
-  },
+	root: true,
+	env: {
+		browser: true,
+		es2021: true,
+		node: true,
+	},
+	extends: ["plugin:vue/recommended", "plugin:prettier/recommended"],
+	parser: "vue-eslint-parser",
+	parserOptions: {
+		ecmaVersion: 12,
+		sourceType: "module",
+		requireConfigFile: true,
+		ecmaFeatures: {
+			jsx: true,
+		},
+		vueFeatures: {
+			filter: true,
+			interpolationAsNonHTML: false,
+		},
+	},
+	plugins: ["vue"],
+	rules: {
+		"no-unused-vars": "error",
+		"vue/no-multiple-template-root": "error",
+		"prettier/prettier": [
+			"error",
+			{
+				endOfLine: "auto",
+				useTabs: true,
+			},
+		],
+		"no-tabs": "off",
+	},
+	settings: {
+		"import/resolver": ["node"],
+	},
 };

package.json

@@ -11,8 +11,10 @@
     "dev:build": "cross-env node build/index.js ENV_TYPE=1 platform=pc mode=development",
     "test": "webpack --config build/webpack.prod.conf.js",
     "posttest": "webpack --config webpack.config.js",
-    "lint": "eslint --ext .js,.vue src",
-    "lint:fix": "eslint --ext .js,.vue src --no-error-on-unmatched-pattern --fix"
+    "eslint": "eslint --ext .js,.vue src",
+    "prettier": "prettier --check src/**/*.{js,vue}",
+    "lint": "yarn prettier && yarn eslint",
+    "lint:fix": "yarn prettier --write && yarn eslint --fix"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",

prettier.config.js

@@ -1,49 +1,49 @@
 module.exports = {
-  // 行宽 default:80
-  printWidth: 140,
-  // tab 宽度 default:2
-  tabWidth: 2,
-  // 使用 tab 键 default:false
-  useTabs: false,
-  // 语句行末是否添加分号 default:true
-  semi: true,
-  // 是否使用单引号 default:false
-  singleQuote: false,
-  // 对象需要引号在加 default:"as-needed"
-  quoteProps: "as-needed",
-  // jsx单引号 default:false
-  jsxSingleQuote: false,
-  // 最后一个对象元素加逗号 default:"es5"
-  trailingComma: "es5",
-  // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格 default:true
-  bracketSpacing: true,
-  // 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）。default:false
-  bracketSameLine: true,
-  // (x) => {} 是否要有小括号 default:"always"
-  arrowParens: "always",
-  // default:0
-  rangeStart: 0,
-  // default:Infinity
-  rangeEnd: Infinity,
-  // default:false
-  insertPragma: false,
-  // default:false
-  requirePragma: false,
-  // 不包装 markdown text default:"preserve"
-  proseWrap: "preserve",
-  // HTML空白敏感性 default:"css"
-  htmlWhitespaceSensitivity: "strict",
-  // 在 *.vue 文件中 Script 和 Style 标签内的代码是否缩进 default:false
-  vueIndentScriptAndStyle: false,
-  // 末尾换行符 default:"auto"
-  endOfLine: "auto",
-  embeddedLanguageFormatting: "auto",
-  overrides: [
-    {
-      files: "*.md",
-      options: {
-        tabWidth: 2,
-      },
-    },
-  ],
+	// 行宽 default:80
+	printWidth: 140,
+	// tab 宽度 default:2
+	tabWidth: 2,
+	// 使用 tab 键 default:false
+	useTabs: true,
+	// 语句行末是否添加分号 default:true
+	semi: true,
+	// 是否使用单引号 default:false
+	singleQuote: false,
+	// 对象需要引号在加 default:"as-needed"
+	quoteProps: "as-needed",
+	// jsx单引号 default:false
+	jsxSingleQuote: false,
+	// 最后一个对象元素加逗号 default:"es5"
+	trailingComma: "es5",
+	// 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格 default:true
+	bracketSpacing: true,
+	// 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）。default:false
+	bracketSameLine: true,
+	// (x) => {} 是否要有小括号 default:"always"
+	arrowParens: "always",
+	// default:0
+	rangeStart: 0,
+	// default:Infinity
+	rangeEnd: Infinity,
+	// default:false
+	insertPragma: false,
+	// default:false
+	requirePragma: false,
+	// 不包装 markdown text default:"preserve"
+	proseWrap: "preserve",
+	// HTML空白敏感性 default:"css"
+	htmlWhitespaceSensitivity: "strict",
+	// 在 *.vue 文件中 Script 和 Style 标签内的代码是否缩进 default:false
+	vueIndentScriptAndStyle: false,
+	// 末尾换行符 default:"auto"
+	endOfLine: "auto",
+	embeddedLanguageFormatting: "auto",
+	overrides: [
+		{
+			files: "*.md",
+			options: {
+				tabWidth: 2,
+			},
+		},
+	],
 };

src/App.vue

@@ -1,71 +1,25 @@
 <template>
-  <div class="app-contain">
-    <h1>this is a template project</h1>
-    <span>use: vue2.x + webpack5.x + babel7.x </span>
-    <!-- <el-button @click="visible = true">Button</el-button> -->
-    <!-- <ckeditor v-model="editorData" :editor="editor" :config="editorConfig"></ckeditor> -->
-    <div id="editor"><p>this is a Editor</p></div>
-    <router-view></router-view>
-  </div>
+	<div class="app-contain">
+		<h1>this is a template project</h1>
+		<span>use: vue2.x + webpack4.x + babel7.x </span>
+		<el-button @click="visible = true">Button</el-button>
+		<router-view></router-view>
+	</div>
 </template>
 
 <script>
-// import CKEditor from "@ckeditor/ckeditor5-vue2";
-// import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
-// import HtmlEmbed from "@ckeditor/ckeditor5-html-embed/src/htmlembed";
-
-//ok
-import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
-
-// import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
-// import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
-// import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
-// import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
-// import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
-
 export default {
-  name: "App",
-  data() {
-    return {};
-  },
-  mounted() {
-    ClassicEditor.create(document.querySelector("#editor"), {
-      /*    plugins: [HtmlEmbed],
-      toolbar: ["htmlEmbed"],
-      htmlEmbed: {
-        showPreviews: true,
-        sanitizeHtml: (inputHtml) => {
-          const outputHtml = sanitize(inputHtml);
-          return {
-            html: outputHtml,
-            hasChanged: true,
-          };
-        },
-      }, */
-    })
-      .then((editor) => {
-        window.editor = editor;
-      })
-      .catch((error) => {
-        console.error("There was a problem initializing the editor.", error);
-      });
-
-    // ClassicEditor.create(document.querySelector("#editor"), {
-    //   plugins: [Essentials, Paragraph, Bold, Italic, HtmlEmbed],
-    //   toolbar: ["bold", "italic"],
-    // })
-    //   .then((editor) => {
-    //     console.log("Editor was initialized", editor);
-    //   })
-    //   .catch((error) => {
-    //     console.error(error.stack);
-    //   });
-  },
+	name: "App",
+	data() {
+		return {
+			input: "",
+		};
+	},
 };
 </script>
 
 <style lang="scss" scoped>
 .app-contain {
-  color: green;
+	color: green;
 }
 </style>

src/main.js

@@ -5,8 +5,8 @@ import store from "./store";
 import "element-ui";
 
 export default new Vue({
-  el: "#app",
-  router,
-  store,
-  render: (h) => h(App),
+	el: "#app",
+	router,
+	store,
+	render: (h) => h(App),
 });

src/router/index.js

@@ -9,8 +9,8 @@ import routes from "./routes";
 Vue.use(Router);
 
 export default new Router({
-  routes,
-  mode: "history",
-  base: `/dist`,
-  scrollBehavior: () => ({ y: 0 }),
+	routes,
+	mode: "history",
+	base: `/dist`,
+	scrollBehavior: () => ({ y: 0 }),
 });

src/router/routes.js

@@ -1,20 +1,20 @@
 import main from "@/view/main";
 
 export default [
-  {
-    path: "/",
-    alias: ["/main.html"],
-    name: "index",
-    nav_name: "首页",
-    component: main,
-    redirect: "/main",
-  },
-  {
-    path: "/",
-    alias: ["/about.html"],
-    name: "index",
-    nav_name: "关于",
-    component: () => import("@/view/about"),
-    redirect: "/main",
-  },
+	{
+		path: "/",
+		alias: ["/main.html"],
+		name: "index",
+		nav_name: "首页",
+		component: main,
+		redirect: "/main",
+	},
+	{
+		path: "/",
+		alias: ["/about.html"],
+		name: "index",
+		nav_name: "关于",
+		component: () => import("@/view/about"),
+		redirect: "/main",
+	},
 ];

src/store/index.js

@@ -5,9 +5,9 @@ import common from "./modules/common";
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
-  modules: {
-    common,
-  },
+	modules: {
+		common,
+	},
 });
 
 export default store;

src/store/modules/common.js

@@ -1,15 +1,15 @@
 export default {
-  state: {
-    user_name: "小明",
-  },
+	state: {
+		user_name: "小明",
+	},
 
-  getters: {
-    user_name: (state) => state.user_name,
-  },
+	getters: {
+		user_name: (state) => state.user_name,
+	},
 
-  mutations: {
-    SET_USER_NAME: (state, data) => {
-      state.user_name = data;
-    },
-  },
+	mutations: {
+		SET_USER_NAME: (state, data) => {
+			state.user_name = data;
+		},
+	},
 };

src/utils/math.js

@@ -1,7 +1,7 @@
 export function square(x) {
-  return x * x;
+	return x * x;
 }
 
 export function cube(x) {
-  return x * x * x;
+	return x * x * x;
 }

src/view/about/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>this is About Page</div>
+	<div>this is About Page</div>
 </template>
 
 <script>
 export default {
-  name: "Index",
+	name: "Index",
 };
 </script>