@vue/cli使用教程（初级）

@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官网