1.1 提前准备
安装 Node.js 10
1.运行 node -v 查看版本,如果不是 10,请先卸载当前版本
2.去 Node.js 官网下载第 12 版的安装包
安装 @[vue/cli@4.1.2]
如果你已经安装了其他版本的 @vue/cli ,请先卸载,卸载命令是
vue --version # 如果这个命令打印出一个版本号,而版本号又不是 4.1.2 就说明你需要卸载
yarn global remove @vue/cli
然后就可以安装了,命令如下:
yarn global add @vue/cli@4.1.2
vue --version # 版本号应该是 4.1.2
1.2 使用@vue/cli创建项目
vue create vue-test-poject
1.3 目录结构说明
public: 一般不会变动
src: 源代码source的简写src
assets(资源):除了HTML, CSS, JS, TS都放在这里. 比如图片, svg
components: 只放组件
router: 用来放路由
store:
views: 来放视图的
App.vue: 整个应用的视图
Main.ts: 入口文件, 主要功能来渲染App
registerServiceWorker.ts: 与PWA相关
shims-tsx.d.ts: TS相关的
shims-vue.d.ts: TS相关的
tests: 测试相关
下面都是配置文件
tsconfig.json: TS配置
vue.config.js: webpack配置
1.4 添加代码片段 snippets
vscode 安装Vetur和Vue VSCode Snippets