vue-cli3+typescript新建一个项目的思路分析

2020-06-14 06:20:11易采站长站整理

最近在用vue搭一个后台管理的单页应用的demo,因为之前只用过

vue-cli2+javascript
进行开发,而vue-cli3早在去年8月就已经发布,并且对于typescript有了很好地支持。所以为了熟悉新技术,我选择使用
vue-cli3+typescript
进行新应用的开发。这里是新技术的学习记录。

初始化项目

卸载老版本脚手架,安装新版本脚手架后,开始初始化项目。初始化的命令跟2.x版本的略有不同,以前是 vue init

webpack project-name
,而现在是 
vue create project-name 
。vue-cli3已经完全把webpack绑定了,这也就意味着无法像以前那样选择别的打包工具比如
webpack-simple
。如果一定要用
webpack-simple
,可以额外安装 
@vue/cli-init 
,可以在不卸载cli3的情况下使用init命令进行初始化。输入create命令后,可以选择初始配置。为了学习,我选择自定义,并把所有可选内容都勾选上。其余配置项基本就按默认的来,最终的配置情况如下。


? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)Babel, TS, PWA, Router, Vuex, CSS Pre-process
ors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) n

然后需要一点时间来下载npm包,初始化完成后,看一下工程目录,可以看到跟vue-cli2的还是有很多不一样的地方。router和store都变成了单独的文件,而不是以前的文件夹,当然如果有需要的话可以自己建这两个文件夹。

最大的区别在于webpack配置都被隐藏起来了,默认没有了那些config文件,现在如果需要修改webpack配置项,可以在根目录新建一个 vue.config.js进行配置。这种的配制方法在2.x版本也可以用,内容也跟之前的类似。