初始化命令

创建项目

vue2

vue3 create demo

vue3

vue3 create demo

vue2 + webpack

vue2 init webpack demo

vue3 + vite

yarn create vite demo --template vue

sass

cnpm下载

--save-dev = -D 开发环境

--save = -S 生产环境

cnpm i [email protected] [email protected] --save-dev

yarn下载

vue2

yarn add [email protected] [email protected] --save-dev

vue3

yarn add sass sass-loader

element ui

 按需引入

-S生产环境 -D开发环境

yarn下载

yarn add element-ui -S

yarn add babel-plugin-component -D

 cnpm下载 

cnpm i element-ui -S

cnpm install babel-plugin-component -D

 如果是webpack构建的，修改.babelrc文件如下：

{
  "presets": [
    ["env",
	{
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }
    ],
    "stage-2",
    ["babel-preset-env", { "modules": false }]
  ],
 
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "component",
		{
			"libraryName": "element-ui",
			"styleLibraryName": "theme-chalk"
		}
    ]
  ]
 
}

现在废弃了es2015，改为"@babel/preset-env" 这个写法，或者"babel-preset-env"

自己注意preset-env的位置，不然会报错

如果是vue create创建的，修改babel.config.js如下：

module.exports = {
	presets: ['@vue/cli-plugin-babel/preset'],
	plugins: [
		[
			'component',
			{
				libraryName: 'element-ui',
				styleLibraryName: 'theme-chalk',
			},
		]
	]
}

封装element-ui

第一种

新建plugins目录，新建elements.js文件

引入vue 

在vue的原型上挂载方法

 在main.js中引入elements.js文件

第二种

新建plugins目录，新建elements.js文件

import 'element-ui/lib/theme-chalk/index.css'
import {
Button,
} from 'element-ui'
const components=[
Button,
 
]
export function registerApp(app){
    for (const component of components){
        app.component(component.name,component)
    }
}

  在main.js引入elements.js

import Vue from 'vue'
import App from './App.vue'
import { registerApp } from './plugins/elements'
 
Vue.config.productionTip = false
Vue.use(registerApp)
 
new Vue({
  render: h => h(App),
}).$mount('#app')

如果使用了Message, MessageBox，需要单独挂载到vue的原型上

vue-router

vue2

cnpm i vue-router@3

vue3

yarn add vue-router@4

报错

 解决：关闭检查

 以上治标不治本

关闭文件名检查

以下方案根据文件进行关闭规则，更灵活

新建 .eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
  overrides: [
        //这里是添加的代码
        { 
          files: ['src/views/index.vue','src/views/**/index.vue'],   // 匹配views和二级目录中的index.vue
          rules: {
          'vue/multi-word-component-names':"off",
          } //给上面匹配的文件指定规则
        },
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}