vue-cli3.0搭建

安装 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值