命令行建立vue項目

vue -h
vue create learn-vue
❯ Manually select features

選擇下面的組件（空格爲選中/取消）回車確認

使用 history mode

使用node sass

使用ESLint + Airbnb config

保存時檢查代碼

配置文件保存在單獨的文件中

是否保存當前配置，以供下次使用（這裏選擇N）

選擇yarn包管理工具來安裝

出現下圖，就已經安裝完成，進入項目目錄

success Saved lockfile.
Done in 283.93s.
⚓  Running completion hooks...

????  Generating README.md...

????  Successfully created project learn-vue.
????  Get started with the following commands:

 $ cd learn-vue
 $ yarn serve

haima@haima-PC:/media/haima/34E401CC64DD0E28/site/go/src/vue$ cd learn-vue/
haima@haima-PC:/media/haima/34E401CC64DD0E28/site/go/src/vue/learn-vue$ ll
總用量 547
drwxrwxrwx 1 haima haima   4096 5月   4 23:35 .
drwxrwxrwx 1 haima haima      0 5月   4 23:27 ..
-rwxrwxrwx 1 haima haima     76 5月   4 23:35 babel.config.js
-rwxrwxrwx 1 haima haima     30 5月   4 23:30 .browserslistrc
-rwxrwxrwx 1 haima haima    160 5月   4 23:30 .editorconfig
-rwxrwxrwx 1 haima haima    348 5月   4 23:35 .eslintrc.js
drwxrwxrwx 1 haima haima   4096 5月   4 23:35 .git
-rwxrwxrwx 1 haima haima    214 5月   4 23:30 .gitignore
drwxrwxrwx 1 haima haima 176128 5月   4 23:35 node_modules
-rwxrwxrwx 1 haima haima    806 5月   4 23:30 package.json
drwxrwxrwx 1 haima haima      0 5月   4 23:30 public
-rwxrwxrwx 1 haima haima    313 5月   4 23:35 README.md
drwxrwxrwx 1 haima haima   4096 5月   4 23:30 src
-rwxrwxrwx 1 haima haima 363130 5月   4 23:35 yarn.lock
haima@haima-PC:/media/haima/34E401CC64DD0E28/site/go/src/vue/learn-vue$ yarn serve
yarn run v1.22.4
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 7251ms                                                         23:49:25


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

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

瀏覽器裏已經能夠訪問了

http://localhost:8080/

vscode安裝eslint插件

安裝好後，已經有錯誤代碼提示了 。

ctrl+s保存後，會自動幫咱們修改錯誤代碼

eslint配置

eslint官網：

.eslinttrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'indent': ['error', 2], //文本2個空格縮進
    'semi': ["error", "never"], //不要分號
    'quotes': ['error', 'single'], //字符串包裹 single：單引 double:雙引
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};