vue学习笔记（一）：使用 vue cli 初始化项目

安装 vue-cli

vue 官方提供了 vue-cli 用于创建工程化的 vue 项目，vue 的脚手架需要先全局安装，前置条件是电脑中需要有安装 node 环境

$ npm install @vue/cli -g
or
$ yarn global add @vue/cli

运行命令检查脚手架是否安装完成，如果简写的话，V是大写的

$ vue -V
or
$ vue --version

如果正常安装的话，运行上面检测安装完成的命令后，应该是如下结果：

@vue/cli 4.5.15

（4.5.15代表脚手架的版本号，初次安装的话，版本号一般是最新的）

初始化项目

当脚手架工具安装完成后，就可以使用相关命令构建 vue 项目了，在终端中运行如下命令即可开始 vue 项目的创建

$ vue create project-name

在终端中输入上面的命令，按回车后，就会开始构建项目了，接着就是一堆选项了

• 首先是看是否有预设的模板，官方有两个默认的模板

  ? Please pick a preset: (Use arrow keys)
  > Default ([Vue 2] babel, eslint)
    Default ([Vue 3] babel, eslint)
    Manually select features # 手动选择，大多数情况下项目都是通过这个选项初始化的
  

• 选择 Manually select features 后，会出现下面这些选项

  Choose Vue version                  # 选择 Vue版本，可选项为 2.x or 3.x
  Babel                               # 是否使用Babel，一般来说这个是会默认勾选的
  TypeScript                          # 是否使用 TypeScript，vue2.x 一般不建议勾选
  Progressive Web App (PWA) Support   # 是否支持 PWA
  Router                              # 安装 vue router，一般会勾选上
  Vuex                                # 安装 vuex，看情况勾选
  CSS Pre-processors                  # 选择 css 预处理器
  Linter / Formatter                  # 代码校验和格式化工具
  Unit Testing                        # 单元测试
  E2E Testing                         # 端到端测试
  

  其中 CSS Pre-processors 有这几个选项：

  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus
  

  在工程化项目中，建议选择使用 css 预处理器，具体选择根据情况而定，但不推荐选择 SASS with node-sass 版本的，node-sass 在国内使用貌似问题有点多

  如果选择了使用 TypeScript 的话，中间会出现下面这个选项：

  Use class-style component syntax? (y/N)  # 是否使用类式组件, vue3.x 的话，建议使用 N，2.x 建议选择 y
  

• 在构建过程中还会出现的选项：(没按照顺序来)

  $ Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)  # 与TS一起使用babel 
  $ Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  # history 模式的路由
  $ Pick a linter / formatter config: (Use arrow keys)      # 选择代码校验和格式化工具
  $ Pick additional lint features:  # lint 校验时间
  $ Where do you prefer placing config for Babel, ESLint, etc.? # 配置项位置，可选项：独立的配置文件 or package.json
  $ Save this as a preset for future projects? (y/N)   # 保存为预设
  

• 上面的几个选项选择完成后，就会开始项目的构建了，这个过程可能会出现的问题：

  1. 构建过程可能会卡在某个地方，然后会提示 network 相关的问题，这个问题是国内的网络访问 github 不稳定导致的，解决方法大致有两种：a. 电脑连接手机热点，b. 将 npm 的源地址切换为国内的镜像源，然后重新构建就行了

• 当终端中的构建进度跑完后，在对应的目录中就能找到构建的项目文件夹了，文件夹的名字就是 vue create 命令后面跟着的名字

以上就是使用 vue 的脚手架初始化一个 vue 项目的大致流程了。