vue脚手架的搭建

前言

创建vue项目，可以使用 vue-cli 脚手架工具进行快速创建项目，它能快速的生成 vue.js 的工程模板，特别是你使用 webpack 时，使用 vue-cli 脚手架工具可以省去很多操作与配置，能节省很多时间

安装脚手架

首先，先全局安装vue脚手架，有两个大版本

vue-cli2 安装命令

$ cnpm install vue-cli -g

vue-cli3 安装命令

$ cnpm install @vue/cli -g

注意： vue-cli3 包名是 @vue/cli

创建项目

vue2与vue3创建项目的步骤略有不同，这里分开写

vue-cli2 创建项目

运行如下命令进行创建

$ vue init webpack 项目名

等待片刻，会出现一些选项让你选择，按需选择即可

fyypll@FYYPLL MINGW64 /e/前端复习/project
$ vue init webpack fyypll-mall

? Project name fyypll-mall
? Project description my-mall-project
? Author fyypll
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "fyypll-mall".

# Project initialization finished!
# ========================

To get started:

  cd fyypll-mall
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

选项说明

1. Project name (fyypll-mall)： ---项目名称，一般直接回车就行了，直接回车就会用括号中默认的名字（需要注意的是这里的名字不能有大写字母，如果有会报错）
2. Project description (A Vue.js project)： ---项目描述，直接点击回车将使用括号内的默认描述，我填的是my-mall-project
3. Author (fyypll)： ----作者，我的是默认
4. Runtime + Compiler: recommended for most users ---运行加编译，一般推荐这个，选中回车
5. Install vue-router? (Y/n)：---是否安装 vue-router ， vue路由 嘛，一般都是要用到的，选y
6. Use ESLint to lint your code? (Y/n)：--- 是否使用 ESLint 管理代码， ESLint 是个代码风格管理工具，是用来统一代码风格的，一般都是要用的，选y
7. Pick an ESLint preset (Use arrow keys)：---选择一个 ESLint 预设，这里用默认的，直接回车
8. Setup unit tests with Karma + Mocha? (Y/n)： 是否安装单元测试，按需求来选，我选n
9. Setup e2e tests with Nightwatch(Y/n)? ：是否安装 e2e 测试 ，按需求来选，我选n
10. 最后会问你是不是直接运行 npm 安装或 yarn 安装，或者自己安，我选的自己安

接下来，进入项目文件夹，然后运行 cnpm install 把项目需要的包全安装完毕，剩下的，缺什么包就自己手动装就行了，比如默认创建模板是没有 vuex 的，我们需要自己装一下 cnpm install vuex -S

vue-cli3 创建项目

与 vue-cli2 不同， vue-cli3 支持图形化界面创建项目

只需要执行如下代码，浏览器会自动打开创建项目的页面

$ vue ui

然后按需选择创建即可。

当然，也可以使用命令行进行项目的创建

$ vue create 项目名

运行该命令会出现两个选项，第一个是默认安装，第二个是自定义安装。默认安装是没有 vue-router 也没有 vuex 的。

选择自定义安装后会弹出多个选项，用上下键将箭头光标移动到想要安装的选项，按空格键选中（选中后括号里面会出现一个星号），再次按空格表示取消选中（星号消失）

Vue CLI v4.1.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

选择完成后，按回车继续，之后还会有一些选择，按需选择即可。

Vue CLI v4.1.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, 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): Less
? Pick a linter / formatter config: Basic
? 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 dedicated config files
? Save this as a preset for future projects? No