安装

vue的安装就直接参考官方文档，描述的已经很详细了。

项目创建

直接使用vue create + 项目名创建项目，默认有三种配置可选，vue2、vue3各有一个默认创建选项，也可以选第三种自定义项目创建要引入的features。

vector@vectordeMBP  ~/dev/vue  vue create demo


Vue CLI v4.5.4
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.5.4 → 5.0.8   │
│    Run npm i -g @vue/cli to update!     │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features

这里选择自定义后，会有以下选项可选，使用⬆️⬇️方向键上下移动，使用空格键选中或者取消选中，选完之后，点击回车键继续。

? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

选择vue版本

? Choose a version of Vue.js that you want to start the project with
  2.x
❯ 3.x (Preview)

路由模式选择，是否使用历史路由模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

css预处理器选择

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

代码检测工具模式选择

? 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: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save // 保存时检测
 ◯ Lint and fix on commit // fix commit 时检测

配置文件存放

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files // 各插件单独文件配置
  In package.json // 放到 package.json

是否保存本次配置，方便之后创建项目简化步骤

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

目录结构

├── README.md
├── babel.config.js // babel 配置文件
├── node_modules // node 依赖包下载目录
├── package.json // 依赖目录，项目buid，启动指令配置
├── public // 公共资源
├── src  // 主要代码目录
│   ├── App.vue  // 项目入口文件
│   ├── assets   // 静态资源
│   ├── components //组件目录
│   ├── main.js  // 入口js，全局变量、js、插件引入
│   ├── router   // 前端路由
│   ├── store    // 应用数据
│   └── views    // 页面目录
└── yarn.lock // yarn包管理自动生成文件，如果使用npm包管理会生成相应的npm包管理文件

项目启动

这里使用的yarn，使用npm的可以执行npm run serve，正常启动后就可以访问http://localhost:8080/查看页面。

vector@vectordeMBP  ~/dev/vue/demo   master  yarn serve
yarn run v1.22.19
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2584ms                                                                                                                                                              22:59:59


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.10.185:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

以上的启动命令serve是package.json文件中的配置.

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },