创建一个vue项目，需要安装node环境，

推荐使用VScode 点击下载
安装node 点击下载
安装成功后查看node跟npm版本

$ node -v
v14.10.1
//其实npm已经在Node.js安装的时候顺带装好了。我们在命令提示符或者终端输入npm -v，直接查看版本即可
$ npm -v
6.14.11

此处是node跟npm的一个简介，有兴趣的可以点击进去查看

安装 淘宝镜像

npm下载比较慢可以使用cnpm进行下载

npm install -g cnpm -registry=https://registry.npm.taobao.org

查看是否安装成功

$ cnpm -v
cnpm@6.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.8 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@14.10.1 (/usr/local/bin/node)
npminstall@3.27.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin x64 19.6.0 
registry=https://r.npm.taobao.org

安装 vue cli

npm install -g @vue/cli

创建项目名（项目名不能使用驼峰）

vue create hello-world

根据需求配置vue2或者vue3还是自定义

? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)     
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features   //项目自定义

此处需要注意，如果选择自定义后才会出现下面对的选项，如果选择默认就是直接跳到最后一步
选择自定义项目后选择是vue2或者vue3的项目

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router,
 Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow 
keys)
❯ 2.x 
  3.x (Preview) 

选择 Manually select features (根据自己的需求进行项目配置)

? 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 s
election)
>(*) Babel   //ES6转ES5
 ( ) TypeScript   //JS超集
 ( ) Progressive Web App (PWA) Support   //渐进式Web应用
 (*) Router  //路由
 (*) Vuex  //状态管理
 (*) CSS Pre-processors  //CSS预处理
 () Linter / Formatter   //规范类型
 ( ) Unit Testing  //测试
 ( ) E2E Testing  //测试

是否使用history模式的路由 选择 “N” 或者 “Y”.

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) 

CSS预处理器选择

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow ke
ys)
> Sass/SCSS
  Less
  Stylus

选择哪个ESLint自动化代码格式化检测

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择语法检查

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save  //语法检查配置文件保存时检查
 ( ) Lint and fix on commit  //文件提交时检查

配置文件的存放位置（推荐独立放置配置文件）

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files  //放独立文件放置
  In package.json  //放package.json里

是否保存此预设(选择yes的话下次就可以不用进行配置)

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

切换到项目

cd hello-world  
// 启动项目
npm run serve

//启动成功
  App running at:
  - Local:   http://localhost:8080/ 


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

项目运行成功，按住Ctrl键，单击红色部分，就可以在浏览器打开 http://localhost:8080，看到欢迎页了~