用vue搭建权限管理项目前端（一）

个人学习经历，边学边写，给自己做个总结，不求能教导别人，过程中应当会有很多错误，如果有大牛看到，烦请各位大牛指正后端程序猿一只，公司要求后台管理界面要自己写，没接触过vue，头大。找了些资料看，最好的自然当属官网资料，想深入了解这是必不可少的环节，如果诸位有更好的推荐，也可以分享。本项目学习资料来源自徐丽健的《SpringBoot+Spring Cloud + Vue +Element项目实战：手把手教你开发权限管理系统》。码云上有源码，也有QQ群解答，作者亦有对应博客详讲，是一本不错的入门书。先讲讲我的学习目标：重心放后端，前端我目标是理解整个代码的运行流程，能使用vue进行开发。把握作者开发思维，借鉴优秀思路。话不多说，开始。个人经历，不会详写，挑我觉得有必要的写。

day 1

今天是2019.12.12，嗯，双12，除了剁手也要好好学习😂

一.技术

vue、vue.router、vuex、element-ui 官网有资料

二、开发环境

VS code，好东西，简单方便快捷。
NPM，Node JS提供的NPM依赖管理和编译打包工具，用之前先装NodeJS，下好后将Node添加到系统变量中。
安装webpack：npm install webpack -g
安装脚手架项目初始化工具vue-cli，-g表示全局,npm install vue-cli -g
PS：NPM网速有时很差，跟maven一样，建议用镜像仓库，国内用淘宝，npm install -g cnpm --registry=https://registry.npm.taobao.org
Yarn:Facebook发布的node.js包管理器,跟npm类似。npm i yarn -g -verbose
切换到国内淘宝镜像：yarn config set registry https://registry.npm.taobao.org

yarn的使用：
npm install => yarn install
npm install --save[package] => yarn add [package]
npm install --save-dev [package] => yarn add [package] --dev
npm install --global [package] => yarn global add [package]
npm uninstall --save [package] => yarn remove [package]
npm uninstall --save-dev [package] => yarn remove [package]

三、创建项目

1. 生成项目
```
 npm init webpack 项目名
```
1. 安装依赖
```
  npm install/yarn install
```
1. 启动
```
  npm run dev
```

四、安装插件

Element

饿了么开源前端框架

安装

npm i element-ui -$
yarn add element-ui

使用

main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

页面路由

使用方式

关闭eslint检查：这玩意烦死了。  ./config/index.js中useEslint:true 改为false
页面路径：
    ./src/router/index.js中添加：
    import * from '@/views/**'
    routers:[]添加路径
代码：./src下 views文件夹，没有则新建一个，自己按模块添加

scss

安装

yarn add sass-loader node-sass -dev

使用

./build文件夹下webpack.base.conf.js中添加
{
    test:/\.scss$/,
    loaders:['style','css','sass']
}

vue文件中
<style lang ="scss">
 XXXX
</sytle>
小坑：sass-loader版本太高8.0.0，导致编译报错，在package.json中将版本降到7.3.1，重新npm install一遍，再启动即不报错

axios

定义：axios是一个基于Promise用于浏览器和Node.js的HTTP客户端，后续用来发送HTTP请求

安装：

npm install axios //不用yarn

使用方式

安装完，在main.js中引入: import axios from 'axios',可以定义别名Vue.protptype.$axios = axios,自选
调用：
<script>improt axios from 'axios'</script>
this.$axios.get....

Mock.js

作用：

模拟后台接口提供的数据
不用依赖后台接口完成，分离前后端

安装：

npm install mockjs

测试

./src文件夹下新建mock文件夹，新建mock.js，编写模拟接口返回数据，具体自学
vue文件中引入：import mock from '@/mock/mock.js'