准备
1 gitee创建仓库git@gitee.com:dixon-wang/giddy-up-accont.git
2 在线设计稿
创建项目
vue create giddy-up-vue- 选择版本
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features
- Check the features needed for your project:
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
(*) Babel
(*) TypeScript
(*) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
>(*) Unit Testing
( ) E2E Testing
- Choose a version of Vue.js
? Choose a version of Vue.js that you want to start the project with
3.x
> 2.x
- Use class-style component syntax? Y
? Use class-style component syntax? Yes
- Use Babel alongside TypeScript?
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
- ? Use history mode for router? 选择N，使用history模式的router，需要后台支持
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
- Pick a CSS pre-processor，选择CSS预处理器，dart-sass
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Less
Stylus
- Pick a linter / formatter config，默认，直接回车
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
- Pick additional lint features
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>( ) Lint on save
(*) Lint and fix on commit
- Pick a unit testing solution
? Pick a unit testing solution: (Use arrow keys)
> Jest
Mocha + Chai
- Where do you prefer placing config for Babel, ESLint, etc.?
? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files
In package.json
- 是否保存配置，N
? Save this as a preset for future projects? (y/N)
创建项目的完整过程
D:\Desktop\html\.Project>vue create giddy-up-vue
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint and fix on commit
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N
其他人写的 用vue-cli3搭建项目
JS或者TS使用@待办src目录
实际上，在webstorm创建项目时，在JS或者TS中引用其他组件，IDE会自动补全补录，比如在srv/views/AboutView.vue文件中引用组件src/components/ProductInfo.vue：
<script lang="ts">
import ProductInfo from "../components/ProductInfo.vue";
</script>
在写完ProductInfo后，IDE会自动补全；
但是，如果想要把src目录下的控件的引用语句写成“绝对路径”，最好用@符号代替src目录，这样的import语句可以更自由
<script lang="ts">
import ProductInfo from "@/components/ProductInfo.vue";
</script>
可以这样配置，原因与tsconfig.json的配置有关：
"paths": {
"@/*": [
"src/*"
]
},
css使用@待办src目录
使用@import语法
style中的@import是stylus的语法，是在css中引用css文件
例如，在src/APP.vue文件中，引用src/assets/style/test.scss文件中定义的样式：
<style lang="scss">
@import "assets/style/test";
body{
background: $bgColor;
}
</style>
其中test.scss文件如下
$bgColor:#f60;
实际操作发现，这样还是可以的，路径没有加@IDE也能解释出来。
其他人记录的是这样引用：@import "~@/assets/style/test";会有红色波浪线报错，这是要手动指定配置文件：
