vue完整框架大建

1.用vue-cli生成项目

​ 1.1 使用 vue create 创建一个项目

​ 1.1.1在终端/cmd输入 vue create 项目名

​ 1.1.2按下下方向键选择自定义配置 回车（Enter）

按 空格键 选择 Router、Vuex、CSS Pre-processors、Linter / Formatter 其它按照默认即可 。选好后 回车

​ 选择2.x版本（或按需选择）回车

输入y 回车

选择 Less 作为css预处理器

选择 Standard 代码风格

检查代码风格的时机：保存代码，提交代码 去做检查。

依赖的工具，每一个工具对应生成一个配置文件。而不是统一写在package.json中。

是否记录以上选择操作，方便下次快速创建。不记录，因为每次都不一样。

创建成功

2.了解结构目录

3.调整目录结构

需要调整src的目录结构，分工明确，代码可维护性更好。

1
2
3
4
5
6
7
8
9
10

src
├─api            # 接口相关代码，axios相关代码
├─assets         # 静态资源，css  images ...
├─components     # 公用级别组件
├─router         # 路由相关代码
├─styles         # less相关代码
├─utils          # 全局工具模块相关代码
├─views          # 路由级别组件
└─App.vue        # 根组件
└─main.js        # 入口文件

4.安装常用的npm包

1

npm i axios  # 一款基于Promise API 的HTTP客户端   https://github.com/axios/axios

1

npm install mockjs    # 生成随机数据，拦截 Ajax 请求   http://mockjs.com/

1

npm install moment --save  # 一个轻量级的JS日期库，用于分析、校验、操作和格式化日期  http://momentjs.cn/

1

npm i --save lodash  # 一款JS库，封装了很多有用的JS API https://lodash.com/

带更新中…