vue脚手架的搭建

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

安装脚手架

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

vue-cli2 安装命令

1
cnpm install vue-cli -g

vue-cli3 安装命令

1
cnpm install @vue/cli -g

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

创建项目
vue-cli2 创建项目

运行如下命令进行创建

1
vue init webpack 项目名

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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-routervue路由 嘛,一般都是要用到的,选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 支持图形化界面创建项目

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

1
vue ui

然后按需选择创建即可。

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

1
vue create 项目名

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

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

1
2
3
4
5
6
7
8
9
10
11
12
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

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

1
2
3
4
5
6
7
8
9
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