1记账 Vue 项目-搭建

162 阅读1分钟

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配置

image.png

1.4 添加代码片段 snippets

vscode 安装Vetur和Vue VSCode Snippets

1.5 JS或TS里使用@

image.png

image.png

1.6 CSS或SCSS里使用~@

image.png