vue管理系统环境搭建(PC)
2020-09-24 本文已影响0人
我那么逗
。在 Git Bash命令行中
创建vue文件夹 :
vue create hello-world(项目名)
进入hello-world文件夹:
cd /d/hello-world
vscode中在hello-world创建一个vue.config.js文件
在vue.config.js中写如下代码:

创建/src/router.js并编写路由规则:

在src中创建一个文件夹测试路由
在main.js文件中挂载

在src中创建一个store文件夹
store文件夹下新建一个index.js文件
文件代码参考

store文件夹再建一个moudules文件夹
moudules文件夹下新建good文件
good文件代码参考

在main中引入store并挂载
在src中创建一个utlis文件夹
utlis文件夹中分别新建
api.js fetch.js img.js
fetch.js代码参考

api.js代码参考

img.js代码参考

在main.js中引入api并挂载在Vue的prototype上

在视图app.vue中使用<router-view></router-view>放在div标签中
在命令行安装包
安装路由
cnpm install vue-router -S
安装状态管理
cnpm install vuex -S
安装axios
cnpm install axios -S
安装sass
cnpm install node-sass -D
cnpm install sass-loader -D
在package.json中写:

安装element-ui
cnpm install element-ui -S
