创建vue项目

安装vue

npm install vue -g 

查看vue版本

npm list vue -g

CodeHaywire@DESKTOP-A56JCLR MINGW64 ~/Desktop
$ npm list vue -g
C:\Users\CodeHaywire\AppData\Roaming\npm
└─┬ @vue/cli@5.0.6
  └── vue@2.6.14

安装 vue-cli

npm install -g @vue/cli

查看 版本

vue -V

创建项目

vue create vue-demo

Vue CLI v5.0.1
? Please pick a preset:
> all-vue ([Vue 2] less, babel, router, vuex, eslint) 
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

选择配置 空格选中

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? 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

Enter键 创建项目 选择拉取文件

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 
  3.x
> 2.x   选择vue版本 2.x  Enter

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n  是否使用默认历史路由模式 选择no

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? 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)
> Less     选择 css预处理器  随便选，喜欢哪个用哪个
  Stylus

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? 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): Less
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only   格式化模式选择 我选择默认
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? 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): Less
? Pick a linter / formatter config: Basic
? 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

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? 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): Less
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? 
  In dedicated config files
> In package.json     选择配置存储位置

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? 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): Less
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n  是否保存为以后创建项目的默认选择，选择y,则下次不需要选就可以直接创建项目了

创建成功

Vue CLI v5.0.1
✨  Creating project in E:\vscode-workspace\vue-demo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 858 packages in 11s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 100 packages in 3s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-demo.
👉  Get started with the following commands:

 $ cd vue-demo
 $ npm run serve

遇到一些问题

vue文件第一行有波浪线提示，虽然项目能正常运行，但是看着受不了

错误提示：Parsing error: No Babel config file detected for ...

解决方法：

在 package.json文件下找到"parserOptions"，添加："requireConfigFile" : false

    "parserOptions": {
      "parser": "@babel/eslint-parser",
      "requireConfigFile":false
    },

不想被 git 接管

vue create name -n

vue-cli 里面包含了webpack， 并且配置好了基本的webpack打包规则