如何搭建一个残缺的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
复制代码