跳转到router里面写了的页面，那就用 <router-link to="/money">记账</router-link>
一、效果图
首页.png
二、提前准备
1、安装@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
2、安装Node.js
理论上来说只要你的版本是 10 以上（10、12）都可以，但保险起见，还是跟我保持版本一致比较好。如果你是老手，可以使用 nvm 来安装 Node.js 10，与其他版本共存；新手请按照下面的步骤做
- 运行 node --versioin 查看版本，如果不是 10，请先卸载当前版本：进入控制面板点击卸载即可（Mac 用户使用 brew uninstall node）
- 去 Node.js 官网下载第 10 版的安装包
- 一路点击下一步，注意安装目录可以改，一定不要在路径中出现中文和空格
注意重装 Node.js 后，你以前用 npm 或 yarn 全局安装的命令可能都会消失不见，如果你需要，可以需要重新全局安装这些命令。
npm install -g nrm --registry=https://registry.npm.taobao.org
nrm use taobao
3、安装webstorm
三、创建项目
- 在命令行搭建一个Vue项目
vue create morney
- 配置如下
-
用webstorm打开这个项目，用
yarn serve即可预览
-
认识一下目录
-
优化
（1） 编辑器配置：添加vue snippets
-
new → vue component → 输入文件名 → 发现三个标签已写好
-
修改默认的：setting → File and Code Template（模板）→ vue single File component → script lang="ts"和style lang="SCSS" scoped
-
scoped：可以让当前组件的class就是当前组件的class。就算和其他组件class名重复也不要紧。（会自动给你的class加点东西 就不会和其他组件重名了）（所以App.vue不要加scoped） （2）import alias
-
TS/JS可以通过
@目录名引入文件(@就是src) -
CSS/SASS可以通过
@import '~@/目录名'引入文件 -
这样就不用自己计算相对路径了
-
但是会有红波浪线，因为webstorm母鸡这个
~@/目录名路径 -
所以，WebStorm还需要在设置里搜索webpack然后填上路径
C:\Users\jj\jizhang\morney\node_ modules\@vue\cli- service\webpack.config.js,而就不会有波浪线了。 -
其实还是有红波浪线。需要把vue.config.js所有
svg-sprite-loader改成svg-sprite-loader-mod，还要安装yarn add --dev svg-sprite-loader-mod
