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 模板项目

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