【Vue】模块化项目构建
Vue + Typescript 模块化项目的构建
得益于 vue-cli 3.0
多了 create
,项目构建变得非常的简单了
构建主要步骤
默认已经有
node.js
环境,最好8+版本安装
vue-cli 3.0
1.0 卸载旧版2.x版本,如果有的话
1.1
npm i -g @vue/cli
,(chromedriver可能安装失败,需要从taobao镜像安装缓存,然后再安装cli)1.2
vue -V
确认版本为 3.x(目前为3.0.0-beta.16)使用
vue-cli
构建框架
1 | vue create vue |
以上为我的具体框架选择
npm/yarn serve
运行即可需要修改
webpack
等设置,新建vue.config.js
可以自定义配置,具体配置见官方vue-cli
仓库-> docs -> config注:支持Jsx,内置webpack、babel、ts等,基本无需多余配置,开箱即用,相对2.x自己构建已经非常精简了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38{
"name": "vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"bootstrap-vue": "^2.0.0-rc.11",
"vue": "^2.5.16",
"vue-class-component": "^6.0.0",
"vue-property-decorator": "^6.0.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"vuex-class": "^0.3.1"
},
"devDependencies": {
"@types/chai": "^4.1.0",
"@types/mocha": "^2.2.46",
"@vue/cli-plugin-babel": "^3.0.0-beta.15",
"@vue/cli-plugin-typescript": "^3.0.0-beta.15",
"@vue/cli-plugin-unit-mocha": "^3.0.0-beta.15",
"@vue/cli-service": "^3.0.0-beta.15",
"@vue/test-utils": "^1.0.0-beta.16",
"chai": "^4.1.2",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}VSCode调试断点,安装Debugger插件,这里用的是
Debugger for FireFox
,配置:
1 | // launch.json |
服务还是要先命令行运行yarn serve
的
参考
vue-cli官网:有介绍及教程等(瞎折腾好久才发现)
VSCode调试运行在Chrome, Firefox与Edge内的JS程序
记
一开始不知道有vue-cli 3.0
,用的2.9.6,各种包一个个装,ts也要自己配置,搞了一两天,终于能跑了,但是VSCode就是提示找不到模块,想想应该是包装的太乱太杂了。3.0中间不需要按2.x一样装配ts、jsx等等,省的自己装的乱七八糟的,终于能安心看vue和ts了。