电商商城定制开发vue学习笔记（一）：使用 vue cli 初始化项目

安装

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

$ npm install @vue/cli -gor$ yarn global add @vue/cli
1
2
3

电商商城定制开发运行命令检查脚手架是否安装完成，如果简写的话，V是大写的

$ vue -Vor$ vue --version
1
2
3

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

@vue/cli 4.5.15
1

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

初始化项目

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

$ vue create project-name
1

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

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

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

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

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

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

  Sass/SCSS (with dart-sass)Sass/SCSS (with node-sass)LessStylus
  1
  2
  3
  4

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

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

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

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

  $ 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
  2
  3
  4
  5
  6

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

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

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

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