51·[Vue项目]旺财记账-项目搭建

理论上来说只要你的版本是 10 以上（10、12）都可以，但保险起见，还是跟我保持版本一致比较好。如果你是老手，可以使用 nvm 来安装 Node.js 10，与其他版本共存；新手请按照下面的步骤做

1.运行 node --versioin 查看版本，如果不是 10，请先卸载当前版本：进入控制面板点击卸载即可（Mac 用户使用 brew uninstall node）
2.去 Node.js 官网下载第 10 版的安装包
3.一路点击下一步，注意安装目录可以改，一定不要在路径中出现中文和空格
注意重装 Node.js 后，你以前用 npm 或 yarn 全局安装的命令可能都会消失不见，如果你需要，可以需要重新全局安装这些命令。

npm install -g nrm --registry=https://registry.npm.taobao.org
nrm use taobao

如果你已经安装了其他版本的 @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
如果你是老手，想要使用更高版本的 @vue/cli，可以创建项目后，参考官方的升级教程（新手不用看）

为什么一定要求大家用这个版本呢？因为就在我录完课程之后，@vue/cli 升级到了 4.2.0，这个版本对 eslint 做了升级，导致我的课程的代码在 4.2.0 版本里会报一个 eslint 错误，解决这个错误需要手动修改 eslint 配置，有点影响开发体验。

## 创建项目
MacBook-pro:HTML driverzeng$ vue create morney

## 手动选择
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

## 选择需要的特性
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◉ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
❯◉ Unit Testing
 ◯ E2E Testing
 
## 使用class样式的组件语法
? Use class-style component syntax? Yes

## babel和TypeScript一起用
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

## 不使用history模式
? Use history mode for router? (Requires proper server setup for index fallback in production) No

## 使用dart-sass预处理器
❯ Sass/SCSS (with dart-sass)

## ESLint也选择默认的
❯ ESLint with error prevention only

## 什么时候提示代码的错误？
 ◯ Lint on save
❯◉ Lint and fix on commit

## 使用什么测试
  Mocha + Chai
❯ Jest

## 配置放在单独的配置文件中
❯ In dedicated config files
  In package.json

## 是否要保存当前配置，以后创建项目都用此配置
# 我们当前的配置还是比较全面的，不过尽量选no，难免以后要改
? Save this as a preset for future projects? (y/N) n

## 进入项目目录
cd morney

## 启动服务
yarn serve

public          ## 放静态文件目录
src             ## 存放源代码
    - assets                    ## 资源，图片，svg
    - commponents               ## 组件
    - router                    ## 路由
    - store                     ## store数据存储
    - views                     ## 视图，首页，关于页
    - App.vue                   ## 整个应用的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配置

## 注意:一般来说，我们只需要改src中的代码文件。

<template>
</template>

<script>
</script>

<style>
</style>

<template>
    <div>#[[$END$]]#</div>
</template>

<script lang="ts">
export default {
name: "${COMPONENT_NAME}"
}
</script>

<style lang="scss" scoped>

</style>

import HelloWorld from '@/components/HelloWorld.vue'

$red:#f00;

@import "assets/styles/test.scss";

body {
      background: $red;
    }

    @import "~@/assets/styles/test.scss";

    body {
      background: $red;
    }