@vue/cli是vue-cli的3.0版本，更新好久了，因为项目中一直没有用到，所以一直没有学习，最近刚好有时间，充充电。
准备工作
@vue/cli要求Node.js版本8.9或者更高，所以先检查一下Node.js版本。
node -v
我从来不担心这个，我是一个喜新厌旧的人，不管技术跟不跟的上，版本要跟上，我的是v10.14.1
忘掉过去
如果你已经全局安装了旧版本的vue-cli，不要犹豫，踹了它
什么，怎么看，能不能长点心！
vue -V
2.9.6,踹它
npm uninstall vue-cli -g
干的漂亮
迎接未来
npm install @vue/cli -g
等待中。。。
这已经是第二天，不好意思网络有点渣！！！
再看一下版本，已经是3.2.1了
欢呼，雀跃，撒花
创建一个新项目
小的们，操练起来
vue create my-future
不是2.X版本的vue init webpack my-future了哦，我就是想用2.X版本怎么办，那你想去吧，你咋这么梗呢，桥接工具@vue/cli-init拿去
npm install @vue/cli-init -g
接下来会让你选择一个preset
- default：一个默认的选项包含eslint、babel
- Manually：手动选择特性
自己的人生怎么能被别人定义，我选择手动选择
- Babel：用于编写下一代JavaScript的编译器，必须的吧
- TypeScript：JavaScript的一个超集，很火，不会，又多了一项要学的东西！！！
- Progressive Web App (PWA) Support：PWA渐进式wabapp,个人理解类似国内微信小程序、快应用
- Router：路由，不解释
- Vuex：状态管理，也不解释
- CSS Pre-processors：css预处理
- Linter/Formatter：代码风格
- Unit Testing：单元测试
- E2E Testing：端到端测试
选择你需要的特性，会不会用的我都选了，根据你选择不同的特性，后边会有不同的选项
- Use class-style component syntax?：使用 类 风格的组件语法
- Use Babel alongside TypeScript for auto-detected polyfills?：用Babel与TypeScript一起用于自动检测polyfills
- Use history mode for router?：路由使用history模式
- Pick a CSS pre-processor：CSS预编译选择
Sass/SCSS
Less
Stylus
- Pick a linter / formatter config：选择代码风格控制
TSLint (选择TypeScript模块出现该选项)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
- Pick additional lint features：选择代码风格额外的功能
Lint on save：保存的时候检测
Lint and fix on commit (requires Git)：提交的时候检测，需要Git
- Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?：你更喜欢将Babel、PostCSS、ESLint等配置放到那
In dedicated config files：各自专用的文件
In package.json：放在package.json文件中
- Save this as a preset for future projects?：将以上配置保存，以后可以直接用
项目开始自动安装依赖包
运行项目
cd my-future // 进入项目根目录
npm run serve // 运行项目
不再是npm run dev，有点不习惯呢
打包
npm run build
还是原来的味道
项目结构
感觉更简洁，
src还是那个src，
dist也还是那个dist，
但是。。。，
config呢，
build呢！！！
遇到哪些奇葩需求我该怎么办？
等我学习一段时间再看吧
更多相关知识
@vue/cli官网
网友评论