vue-cli PC端构建

Posted 2020-12-29 jszhp

1 # 全局安装 vue-cli
2 npm install --global vue-cli  //首次安装需要
3 # 创建一个基于 webpack 模板的新项目
4 vue init webpack my-project
5 # 安装依赖，走你
6 cd my-project
7 npm install//使用cnpm install代替
8 npm run dev

localhost:8080查看

安装axios

npm install axios --save
//如报错，使用淘宝镜像
cnpm install axios --save

项目main.js中引入

import axios from ‘axios‘
Vue.prototype.$http = axios

 1 安装element
 2 
 3 npm i element-ui -S
 4 //如报错，使用下面安装
 5 cnpm i element-ui -S
 6 
 7 
 8 项目main.js中引入
 9 
10 import ElementUI from ‘element-ui‘
11 import ‘element-ui/lib/theme-chalk/index.css‘
12 Vue.use(ElementUI);
13 
14 
15 
16 安装echarts
17 
18 cnpm install echarts -S
19 
20 
21 项目main.js中引入
22 
23 import echarts from ‘echarts‘
24 Vue.prototype.$echarts = echarts
25 
26 
27 安装jquery
28 
29 cnpm install jquery --save-dev
30 
31 
32 
33 项目main.js中引入
34 
35 import $ from ‘jquery‘
36 
37 
38 
39 安装vuex
40 
41 npm i vuex -S
42 或者
43 cnpm i vuex -s
44 
45   
46 使用vuex
47 
48 import Vue from ‘vue‘
49 import Vuex from ‘vuex‘
50 
51 Vue.use(Vuex)
52 
53 刷新保持vuex状态
54 
55 npm install vuex-persistedstate
56 
57 
58 使用
59 
60 import createPersistedState from ‘vuex-persistedstate‘
61 export default new Vuex.Store({
62     state,
63     getters,
64     actions,
65     mutations,
66     plugins: [createPersistedState()]//此行为保存状态
67 });
68 
69 
70 安装SAAS
71 
72 npm install sass-loader --save-dev
73 还需要安装
74 npm install node-sass --save-dev