创建项目

vue3 create demo

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 node-sass@4.14.1 sass-loader@7.3.1 --save-dev

yarn下载

yarn add node-sass@4.14.1 sass-loader@7.3.1 --save-dev

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',
			},
		]
	]
}

新建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')