vue-cli3搭建项目之项目初始化配置
Vue-cli3搭建完整项目之项目初始化配置最近发现vue-cli的版本更新到3+了,本着学习的态度开始研究了一下它,发现里面变化太大了,比如原先的暴露出来的webpack的配置你会发现在3里面根本找不到,下面就开始搭建一个完整的项目。vue-cli3官网一、升级或下载vue-cli3npm install -g @vue/cli二、创建项目创建项目vue create 你...
·
Vue-cli3搭建完整项目之项目初始化配置
最近发现vue-cli的版本更新到3+了,本着学习的态度开始研究了一下它,发现里面变化太大了,比如原先的暴露出来的webpack的配置你会发现在3里面根本找不到,下面就开始搭建一个完整的项目。
一、升级或下载vue-cli3
npm install -g @vue/cli
二、创建项目
- 创建项目
vue create 你的项目名称
注意:原先的vue init 指令已经不适用了,如果想继续使用可以安装@vue/cli-init
npm install -g @vue/cli-init
vue init webpack 你的项目名称
-
项目配置
-
default: 默认配置,只有bable和eslint
-
Manually select features: 手动配置
我选的是手动配置,以下是我的配置:
Babel
:将ES6编译成ES5TypeScript
:JS超集,主要是类型检查- Progressive Web App(PWA)Support:渐进式WEB应用支持
- Router:路由
- Vuex:状态管理
Linter
/Formatter
:代码检查工具CSS Pre-processors
:css预编译 (稍后会对这里进行配置)Unit Testing
:单元测试,开发过程中前端对代码进行自运行测试- E2E Testing: 端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。
路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
使用什么css预编译器? 我选择的less(由于我项目中配了一个vux,它是基于lessd的)
代码检查工具选择:
tslint
: typescript格式验证工具(如果前面选择了TypeScript会有这一项)eslint w...
: 只进行报错提醒;(如果还没熟悉eslint,推荐使用此模式)eslint + A...
: 不严谨模式;eslint + S...
: 正常模式eslint + P...
: 严格模式;
代码检查方式:我是都选了
-
List item
所有的依赖目录的配置放置的位置(一般都是package.json)
是否在以后的项目中使用以上配置?(我选的是no,如果选是的话,下一次初始化项目时,会多出一条你上一次的配置)
Save this as a preset for future projects? (y/N) n
下载依赖的工具:使用 yarn,速度快。(也可以使用npm,看个人习惯)
到此为止,安装就完成了,可以等待安装成功。
注:也可以使用vue ui指令进行可视化界面创建项目,与上面的指令式的没多少差别,只是将我们要做的那些操作变成网页选项的形式,个人感觉还是挺不错,推荐使用(里面加了很多人性化的小功能)
这就是创建好后的项目目录结构
更多推荐
已为社区贡献3条内容
所有评论(0)