发布于 

vue完整框架大建

1.用vue-cli生成项目

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

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

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

按 空格键 选择 RouterVuexCSS Pre-processorsLinter / 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/

带更新中…


本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.