vue搭建项目及引入elmentui依赖_elementui vue依赖关系

基础环境：

1.node.js

  1、下载地址为：https://nodejs.org/en/ 
  2、检查是否安装成功： node -v 
1
2

3.安装淘镜像： 安装淘宝镜像后npm需要使用cnpm

npm install -g cnpm –registry=https://registry.npm.taobao.org
1

3.2设置淘宝镜像
npm config set registry https://registry.npm.taobao.org
3.3 查看cnpm镜像设置：
npm config get registry 
3.4.查看cnpm镜像设置：
cnpm config get registry 
1
2
3
4
5
6

2. 使用vue ui搭建项目（vue 版本需要>=3.0）

注意：构建项目使用必须使用cmd管理员窗口，不然会报一些莫名的错误

1.安装vue-cli

npm install -g @vue-cli

2. 使用vue ui
命令：   vue ui
1
2
3
4
5
6

3.进入vue ui界面	
1

![



4.等待自行创建即可，完成后会退出这个页面到第一个页面上，
5.使用自己的开发软件进行启动，也可以dos启动

Element-ui引入：

1.安装element-ui：
使用npm:
进入项目根目录后执行

cnpm  i  element-ui -S
1

2.vue中引入element
完整引入
在 main.js 中写入以下内容：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
 
Vue.use(ElementUI)
 
new Vue({
  el: '#app',
  render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11

3.如果保存
检查一下main.js文件中
注意：最后一个导入文件是否路径一致

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. 如果使用elemnt ui 官网的样式报错
https://element.eleme.cn/#/zh-CN
bug：

✖ 23 problems (23 errors, 0 warnings) 23 errors and 0 warnings potentiall
1

解决：

 执行npm run lint --fix自动修复警告
1