vue init webpack 项目名 //不用手动新建项目,会自动新建文件夹



清理缓存 npm cache clean --force


打包命令 npm run build //打包前项目config的index.js中 build下面的assetsPublicPath: 改为'./' 否则打的包无法直接访问


注：在安装cnpm后npm要换成cnpm


 


安装element ui


在vueproject下面


执行npm i element-ui -S


如果安装了cnpm,则使用cnpm i element-ui -S


 


安装成功后


2 vue安装elementUI_默认按钮

 

 


 


package.json中


2 vue安装elementUI_html_02

 

 


 


如何使用


config的index.js中设置useEslint: false,否则cnpm run dev报错(原因是各种检查格式)


2 vue安装elementUI_默认按钮_03

 

 


 


src的main.js引入


import ElementUI from 'element-ui';


import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);


2 vue安装elementUI_css_04

 

 


 


在build/webpack.base.conf.js中添加,貌似不加也行


2 vue安装elementUI_javascript_05

 

 


 


npm方式：将html元素和样式放在相应的组件.vue中，启动项目出现效果


cdn方式:直接在html中引入elementUI 的 js和css，脱离环境


 


//例如使用按钮组件，在src\components\HelloWorld.vue中添加


<el-button>默认按钮</el-button>


<el-button type="primary">主要按钮</el-button>


<el-button type="text">文字按钮</el-button>


 


2 vue安装elementUI_默认按钮_06

 

 


启动后访问 ​​http://localhost:8081/​​ 8081是端口，根据配置和启动情况决定


2 vue安装elementUI_新建项目_07