1. 搭建环境
环境条件(由命令行工具搭建):
(1)node(npm在安装完node后就有了)
安装node地址:https://nodejs.org/en/
安装淘宝镜像(cnpm):npm install -g cnpm --registry=https://registry.npm.taobao.org
(2)webpack(全局安装)
指令:npm install -g webpack
(3)vue-cli(脚手架全局安装)
指令:npm install vue-cli -g
检查环境
2. 项目搭建
新建一个文件,并将控制台跳转到该路径之下。然后进行项目搭建
项目配置
安装完成后就会在该文件夹下生成一个名为management的vue项目文件 。
对应各个项目文件用途
|-- build // 项目构建(webpack)相关代码
|-- config // 项目开发环境配置
|-- src // 源码目录
|-- static // 静态文件,比如一些图片,json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
安装完成后。可对src源码文件进行调整,添加相关文件夹。
进入文件夹:cd management(项目名称)
执行操作:npm run dev
在浏览器访问 http://localhost:8081 。项目这时候已经搭建运行完成啦
3. 插件安装
插件(Vuex,axios,Sass,Element-ui,eCharts)。 推荐大家使用淘宝镜像(cnpm)安装插件,因为npm网络不好会受到影响。Ctrl+C 两次可结束当前操作重新出现命令行
(1)vuex+axios
cnpm install //安装依赖
cnpm install vuex --save
cnpm install axios --save-dev
vuex使用:
使用this.$
s
t
o
r
e
.
s
t
a
t
e
访
问
数
据
,
t
h
i
s
.
store.state访问数据,this.
store.state访问数据,this.$store.commit触发muations中的方法
(2)sass
cnpm install node-sass --save-dev //sass-loader依赖于node-sass
cnpm install sass-loader --save-dev
需要使用时给style标签添加 **lang=“scss”**就可使用了。
(3)element-ui
cnpm i element-ui -S
(4)echarts
cnpm install echarts -S
安装完成后再main.js文件中添加
import echarts from 'echarts'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.prototype.$echarts = echarts
4. 运行问题
(1)npm run dev页面展示Cannot GET /
解决:可能性一:改config/index.js 里面的assetsPublicPath:’./’ 去掉点
可能性二:webpack-dev-server文件中contentBase:path.resolve(__dirname,“dist”)
从新运行或者重新打开一个窗口。
(2)npm run dev 错误提示:babylon
{ parser: “babylon” } is deprecated; we now treat it as { parser: “babel” }
解决:npm i prettier@~1.12.0,之后再重新dev。
(3)使用sass报错
可能是sass-loader版本过高。可以在package.json查看版本。把"sass-loader": “^8.0.0”,更换成了 “sass-loader”: " ^7.3.1"。
重新安装:
npm uninstall sass-loader(卸载当前版本)
npm install sass-loader@7.3.1 --save-dev