安装 npm install -g @vue/cli
vue-cli3官网:https://cli.vuejs.org/
如果安装过vue-cli时,需要先卸载
卸载之前的vue cli npm uninstall -g vue-cli
安装vue-cli3 npm install -g @vue/cli
查询版本号 vue -V
俩种方式
一丶vue create myvue 通过命令来搭建
二丶vue ui 可视化创建项目
vue create myvue
一丶选择模板 (我这里建议自己配置)
default (babel, eslint) 默认值(babel、eslint)
Manually select features 手动选择要素 (建议)
二丶选择你需要的模板,按 空格 来选择和取消,a可以全选,i反选
Babel:将ES6编译成ES5 (建议)
TypeScript:JS超集,主要是类型检查
Progressive Web App(PWA)Support:渐进式WEB应用支持
Router:路由 (建议)
Vuex:状态管理 (建议)
CSS Pre-processors:css预编译 (稍后会对这里进行配置) (建议)
Linter/ Formatter:代码检查工具 (建议)
Unit Testing:单元测试,开发过程中前端对代码进行自运行测试
E2E Testing: 端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。
三丶使用路由器的历史模式?(需要为生产中的索引回退设置正确的服务器)
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y(建议) 直接回车
四丶选择 css 预处理器
看项目需要和个人习惯
建议 less
因为 sass/scss 下载会很慢 后期可以自己配置 使用 node-sass-install (一直知乎上看到的插件)
五丶代码检查工具
tslint: typescript格式验证工具(如果前面选择了TypeScript会有这一项)
ESLint with error prevention only: 只进行报错提醒;(如果还没熟悉eslint,推荐使用此模式)
ESLint + Airbnb config: 不严谨模式;
ESLint + Standard config: 正常模式
ESLint + Prettier : 严格模式; (建议)
六丶代码检查方式
这个随便 全选/直接回车
七丶依赖目录的配置放置的位置
package.json
单独放置 (建议单独放 方便后期配置 Babel等等 )
八丶保存为将来项目的配置(直接回车就行)
最后的目录
vue-cli3与2的版本有很大区别,其中之前的build目录取消,也就没有了我们之前用的配置文件,那么我们需要在vue-cli3项目手动添加vue.config.js(在根目录下)
官网配置 https://cli.vuejs.org/zh/guide/
项目目录结构
├── public // 静态资源等等
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源等等
│ ├── components // 全局公用组件
│ ├── models // 实体类
│ ├── router // 路由及路由配置相关
│ ├── store // 全局 store管理
│ ├── utils // 全局公用方法
│ ├── pages // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
├── tests // jest测试
├── .eslintrc.js // eslint配置
├── babel.config.js // babel配置
└── package.json