vue学习总结一（环境部署，项目搭建开发）

小白vue学习总结，阅者酌情参考，欢迎指正

一.安装环境

1. 安装nodejs：
   查看版本 node -v
2. 加载vue组件：
   npm install vue
3. 搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具：
   npm install --global vue-cli
4. 创建项目：必须cd到对应的一个目录中
   vue-init webpack vuedemo1 //webpack-simple
   cd vuedemo1
   npm install //如果init没错的话就不用install组件了
   npm run dev
5. 引入组件：
   npm install --save element-ui
6. 然后就可以愉快的CV啦

二.开发过程简介（个人习惯）

7. 克隆模板：这里使用的后台管理系统的模板来自git的以为大神，远程感谢
   后台管理系统模板
   克隆到本地后，进入项目路径下执行以下命令，加载组件
   npm install
   然后就可以运行啦
   npm run dev
   另附此大神的模板使用指南一份
8. 目录结构

   ├── build                      # 构建相关
   ├── mock                       # 项目mock 模拟数据
   ├── plop-templates             # 基本模板
   ├── public                     # 静态资源
   │   │── favicon.ico            # favicon图标
   │   └── index.html             # html模板
   ├── src                        # 源代码
   │   ├── api                    # 所有请求
   │   ├── assets                 # 主题 字体等静态资源
   │   ├── components             # 全局公用组件
   │   ├── directive              # 全局指令
   │   ├── filters                # 全局 filter
   │   ├── icons                  # 项目所有 svg icons
   │   ├── lang                   # 国际化 language
   │   ├── layout                 # 全局 layout
   │   ├── router                 # 路由
   │   ├── store                  # 全局 store管理
   │   ├── styles                 # 全局样式
   │   ├── utils                  # 全局公用方法
   │   ├── vendor                 # 公用vendor
   │   ├── views                  # views 所有页面
   │   ├── App.vue                # 入口页面
   │   ├── main.js                # 入口文件 加载组件 初始化等
   │   └── permission.js          # 权限管理
   ├── tests                      # 测试
   ├── .env.xxx                   # 环境变量配置
   ├── .eslintrc.js               # eslint 配置项
   ├── .babelrc                   # babel-loader 配置
   ├── .travis.yml                # 自动化CI配置
   ├── vue.config.js              # vue-cli 配置
   ├── postcss.config.js          # postcss 配置
   └── package.json               # package.json
   

9. 开始着手改啦
   1）src/router修改路由，改为自己的菜单
   2）在src/view下新建自己的页面文件，地址注意与router中import引入的文件名一致
   3）请求：src/api下建相应的文件
   4）模拟数据：mock下建相应的文件，注意在mock/index.js中引入一下
   5）另ElementUI参考：https://element.eleme.cn/#/zh-CN/component/tree

三.前端在线预览

10. 打包：
    npm run build:prod
    噢，打包前要先将路径修改为相对路径：vue.config.js中
    publicPath: ‘/’,改为 publicPath: ‘./’,
11. 将dist文件中的打包文件上传至git，然后设置setting
    可参考这位大神
    
    至此，前端完事儿啦

作为一个苦逼的后台被抓来写前台很是头大，所以呢接下来会重点写一下接口，据说将来发布还牵扯到跨域问题，持续头大中…