如何搭建一个残缺的 Vue3.0 + ts 的我的项目
一、装置
- 装置 nodejs
此处提供 nodejs 下载地址：https://nodejs.org/zh-cn/down…
大家依据本人电脑的配置抉择适配的 LTS（最新稳固版本进行下载，装置即可，此处略去装置步骤。
2. 卸载旧版本
如果你当初正在用旧版的 Vue-cli1.x 或者 Vue-cli2.x 须要先进行卸载；如果没有，请疏忽此步骤
关上命令窗口，用以下命令进行卸载：
npm uninstall vue-cli -g
复制代码
3. 装置 Vue-cli 3.x
搭建 Vue3.0 的我的项目，必须依赖 Vue-cli 3.0 或者以上的版本，关上命令窗口，通过以下命令进行装置和查看版本号：
// 装置最新版的 vue-cli
npm install -g @vue/cli
// 查看版本号
vue -V
复制代码
二、我的项目搭建过程
1. 新建我的项目，以下我新建一个名称为 my-demo 的我的项目
vue create my-demo
复制代码
2.enter 之后，依据我的项目提醒，接下来会让你抉择一个预设：
newTs : 在我的项目创立实现的最初，会询问你需不需要放弃本次配置，不便下次间接应用; 这个 newTs 就是我之前保留好的一个预设配置
Default：默认的预设配置，会疾速构建一个我的项目，提供了 babel 和 eslint 的反对
Manually select features：手动进行我的项目配置，能够依据我的项目的须要抉择适合的依赖，具备更多的选择性，以下步骤，我将会采纳该种形式。
复制代码
- Vue-cli3.x 将提供以下个性供选择，大家能够依据我的项目须要进行抉择增加的配置项：
通过高低键进行配置项切换，对须要抉择的配置项应用空格键进行选中 / 反选
Babel：应用 babel，便于将咱们源代码进行转码（把 es6=>es5）
TypeScript：应用 TypeScript 进行源码编写，应用 ts 能够编写强类型 js，对咱们的开发有很大的益处
Progressive Web App(PWA)：应用渐进式网页利用（PWA）
Router：应用 vue-router
Vuex：应用 vuex 状态管理器
CSS Pre-processors：应用 CSS 预处理器，比方：less，sass 等
Linter/Formatter：应用代码格调检查和格式化
Unit Testing：应用单元测试
E2E Testing：应用 E2E 测试, end to end（端到端）是黑盒测试的一种
复制代码
4. 而后对每个选中的配置项进行配置
Use class-style component syntax? (Y/n)
是否应用 Class（类）格调装璜器, 即通过 export default class Home extends Vue{} 创立 Vue 实例
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
应用 Babel 做本义, 与 TypeScript 一起用于自动检测
Use history mode for router?
路由模式, 是否抉择 history 模式，启用 history 模式，我的项目 build 之后，可能会呈现关上页面空白的状况哦
Pick a CSS pre-processor?
抉择一种 css 预处理器, 在这里我抉择 less
Pick a linter / formatter config?
抉择一种代码格式化检测工具
TSLint: ts 格局测验工具
ESLint with error prevention only: ESLint 只会进行谬误揭示
ESLint + Airbnb config: ESLint Airbnb 规范
ESLint + Standard config: ESLint Standard 规范
ESLint + Prettier: ESLint（代码品质检测）+ Prettier（代码格式化工具）
复制代码
Pick additional lint features?
代码查看形式: 保留时查看 or 提交时查看; 我抉择, 保留时查看
Pick a unit testing solution?
抉择一种单元测试的计划，目前 Vue 官网举荐也是 jest, 相比而言, 配置简略容易上手, 倡议抉择 Jest 啦
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
Babel, PostCSS, ESLin 等配置文件怎么寄存, 是放到独自的配置文件中? 还是 package.json 里? 这里不便配置清晰难看, 我抉择每个配置独自文件。
Save this as a preset for future projects?
是否须要保留以后配置，在当前的我的项目中可疾速构建? 保留后, 后续创立我的项目时能够间接抉择该配置, 不需独自配置
5. 配置实现后，期待依赖装置实现
6. 构建实现后，我的项目目录构造如下
相比 Vue2.x, Vue3.0 的目录的确精简了很多, 而且咱们会发现, Vue3.0 不在有 webpack.config.js 的配置, 是因为 Vue3.0 通过插件 @vue/cli-service 对 webpack 进行形象解决, 并默认了 webpack 的配置。然而我的项目开发中，咱们必定会存在一些非凡的需要须要调整 webpack, 当然这也是没有问题, 在 Vue3.0 当中, 能够通过在我的项目的根目录创立 vue.config.js 对 webpack 进行自定义配置。
对于 vue.config.js 的配置我会独自写一篇文章进行分享
三、启动我的项目：
cd my-demo
npm run serve
复制代码