线上项目演示地址

后台项目代码地址

Vs Code 插件

  • Vetur: 支持 .vue 文件语法高量

项目准备

Vue CLI 创建项目

  1. 创建项目

    1. vue create edu-boss-fed

  2. 选择预设

    1. Vue CLI v4.5.9
    2. ? Please pick a preset:
    3. Default ([Vue 2] babel, eslint)
    4. Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
    5. > Manually select features

  3. 选择项目中需要的插件

    1. Vue CLI v4.5.9
    2. ? Please pick a preset: Manually select features
    3. ? Check the features needed for your project: 
    4. ( ) Choose Vue version
    5. (*) Babel
    6. ( ) TypeScript
    7. ( ) Progressive Web App (PWA) Support        
    8. (*) Router
    9. (*) Vuex
    10. (*) CSS Pre-processors
    11. >(*) Linter / Formatter
    12. ( ) Unit Testing
    13. ( ) E2E Testing

  4. 是否使用 Vue Router 的 history 模式

    1. Vue CLI v4.5.9
    2. ? Please pick a preset: Manually select features
    3. ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
    4. ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

  5. 选择 CSS 预处理器

    1. ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
    2. > Sass/SCSS (with dart-sass)
    3. Sass/SCSS (with node-sass)
    4. Less
    5. Stylus

  6. 选择代码格式校验与风格

    1. ? Pick a linter / formatter config: 
    2. ESLint with error prevention only 
    3. ESLint + Airbnb config
    4. > ESLint + Standard config
    5. ESLint + Prettier

  7. 选择何时进行 lint 校验

    1. ? Pick additional lint features: 
    2. (*) Lint on save
    3. >(*) Lint and fix on commit

  8. 选择配置信息存储位置

    1. ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
    2. > In dedicated config files
    3. In package.json

  9. 是否存储当前预设

    1. ? Save this as a preset for future projects? (y/N) n

  10. 项目创建完毕 ```powershell � Initializing git repository… ⚙️ Installing CLI plugins. This might take a while… … ⚓ Running completion hooks…

� Generating README.md…

� Successfully created project edu-boss-fed. � Get started with the following commands:

$ cd edu-boss-fed $ npm run serve

  2. 11. 进入项目并启动
  3. ```powershell
  4. # 进入项目目录
  5. cd edu-boss-fed
  7. # 启动预览服务器
  8. npm run serve

  1. 本地访问

    1. DONE  Compiled successfully in 3517ms
    3. App running at:
    4. - Local:   http://localhost:8080/
    5. - Network: http://10.78.1.242:8080/
    7. Note that the development build is not optimized.
    8. To create a production build, run npm run build.

目录结构说明

  1. .
  2. ├── node_modules                第三方包存储目录
  3. ├── public                                静态资源目录，内部的静态资源都会被简单的复制，⽽不经过 webpack
  4. │   ├── favicon.ico
  5. │   └── index.html
  6. ├── src                                                            
  7. │   ├── assets                            资源目录，存储图片等资源
  8. │   │   └── logo.png
  9. │   ├── components                    组件目录
  10. │   │   └── HelloWorld.vue  
  11. │   ├── router                            路由模块目录
  12. │   │   └── index.js
  13. │   ├── store                                容器模块目录（Vuex）
  14. │   │   └── index.js
  15. │   ├── views                                路由页面组件目录
  16. │   │   ├── About.vue
  17. │   │   └── Home.vue
  18. │   ├── App.vue                            根组件，最终被渲染到 index.html 中的 #app
  19. │   └── main.js                            入口文件
  20. ├── .browserslistrc                    指定项目的目标浏览器范围，会被 @babel/preset-env 和 Autoprefixer 用来确定要转移的 JS 特性与 CSS 前缀
  21. ├── .editorconfig                        编辑器配置文件，用来维护跨编辑器（或 IDE）的统一代码风格
  22. ├── .eslintrc.js                        ESLint 配置文件
  23. ├── .gitignore                            Git 的忽略配置文件
  24. ├── README.md                              说明文档
  25. ├── babel.config.js                    Babel 配置文件
  26. ├── package-lock.json                记录包安装时的版本号
  27. └── package.json                        第三方包的说明文件，记录包的依赖信息等内容