Vue（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue只关注视图层， 采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。

1. 首先下载nodejs的包管理工具npm

   1. 使用浏览器访问如下地址：http://nodejs.cn/download/。
   2. 下载后安装。
   3. 安装完毕后，即可使用npm。

2. 安装vue

   1. sudo npm install --global @vue/cli
      

   2. 安装完毕后即可使用vue命令来创建vue工程。

      vue create test_project
      

      注意：vue项目名称一定要用全小写命名。否则将导致项目创建失败。

   3. 接下来就是vue项目配置界面：

      Vue CLI v4.2.2
      ? Target directory /Users/xxxxx/xxxxxx/xxxxx/xxxxxxx/
      alr
      eady exists. Pick an action:
        Overwrite
      ❯ Merge
        Cancel
      

      如果你是git管理的这时候要选merge.

   4. Vue CLI v4.2.2
      ? Please pick a preset:
        default (babel, eslint)
      ❯ Manually select features
      

      这一步选择手动配置。

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

      这里按空格键进行功能勾选，如果使用typescript开发的话，typescript支持必须选上，路由（router）支持也要选上。如果使用自定义的样式加载器（css/less/scss）的话CSS Pre-processors也要勾选，后面是语法检查器支持，最好也勾选上。

   6. Vue CLI v4.2.2
      ? Please pick a preset: Manually select features
      ? Check the features needed for your project: Babel, TS, Router, CSS Pre-process
      ors, Linter
      ? Use class-style component syntax? Yes
      ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
      lls, transpiling JSX)? Yes
      ? 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 (with node-sass)
      ? Pick a linter / formatter config: TSLint
      ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
      > to invert selection)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
      

   7. 选择完毕后，回车vue会自动初始化工程环境：

      Vue CLI v4.2.2
      ✨  Creating project in /Users/xxxxx/xxxxxx/xxxxx/xxxxxxx.
      ⚙️  Installing CLI plugins. This might take a while...
      
      
      > fsevents@1.2.11 install /Users/xxxxx/xxxxxx/xxxxx/xxxxxxx/node_modules/fsevents
      > node-gyp rebuild
      
        SOLINK_MODULE(target) Release/.node
        CXX(target) Release/obj.target/fse/fsevents.o
        SOLINK_MODULE(target) Release/fse.node
      
      > yorkie@2.0.0 install /Users/xxxxx/xxxxxx/xxxxx/xxxxxxx/node_modules/yorkie
      > node bin/install.js
      
      setting up Git hooks
      done
      

   8. 完毕后可已使用IDE打开，笔者使用的是VSCode.

Q.E.D.