- 环境准备
- 使用vue/cli创建项目
- 目录结构介绍
- 编辑器优化
-曾老湿, 江湖人称曾老大。
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
环境准备
Node.js10 |
|---|
理论上来说只要你的版本是 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@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
如果你是老手，想要使用更高版本的 @vue/cli，可以创建项目后，参考官方的升级教程（新手不用看）
为什么一定要求大家用这个版本呢？因为就在我录完课程之后，@vue/cli 升级到了 4.2.0，这个版本对 eslint 做了升级，导致我的课程的代码在 4.2.0 版本里会报一个 eslint 错误，解决这个错误需要手动修改 eslint 配置，有点影响开发体验。使用vue/cli创建项目
使用命令创建项目 |
|---|
## 创建项目
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

如果创建成功，如下图：

代码语言：javascript复制## 进入项目目录
cd morney
## 启动服务
yarn serve使用webstrom打开项目 |
|---|

目录结构介绍

代码语言：javascript复制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中的代码文件。编辑器优化
Vue文件创建优化 |
|---|
原来，我们如果想要创建一个Vue文件，需要鼠标右键然后New，创建vue文件，然后在文件中添加如下内容。
代码语言：javascript复制<template>
</template>
<script>
</script>
<style>
</style>修改默认的template

代码语言：javascript复制<template>
<div>#[[$END$]]#</div>
</template>
<script lang="ts">
export default {
name: "${COMPONENT_NAME}"
}
</script>
<style lang="scss" scoped>
</style>


Import Alias |
|---|
说白了，就特么的是用@符号来import，配置@代表src目录
import HelloWorld from '@/components/HelloWorld.vue'css 和 scss使用@代表src |
|---|
src/assets/styles/test.scss
代码语言：javascript复制$red:#f00;使用App.vue引入
代码语言：javascript复制@import "assets/styles/test.scss";
body {
background: $red;
}

让webstrom知道@这个符号

然后App.vue中测试使用~@引入css
@import "~@/assets/styles/test.scss";
body {
background: $red;
}
