概述

Vue-cli 是一个基于Vue.js的快速开发脚手架，内含三个组件

Cli

@vue/cli全局安装，提供了终端内使用的Vue命令(如：vue create,vue serve,vue ui)

Cli服务

@vue/cli-service是一个开发环境依赖。构建在webpack和webpack-dev-server上(如：serve,build,inspect)

Cli插件

给项目提供可选功能包(如：Babel/Typescript转译,Eslint集成,unit测试,e2e测试)

前期准备

1. 下载安装Node.js
2. 安装及配置npm
3. 键入神奇代码

npm install -g vue-cli

快速开始

新建项目

vue init webpack projectname

此处projectname为项目名称，不能含有大写字母

安装阶段，需要填写一些字段，括号内为缺省值：

Project name (vuetest)
项目名称

Project description (A Vue.js project)
项目描述

Author
作者

Install vue-router? (Y/n)
是否安装vue-router

Use ESLint to lint your code? (Y/n)
是否使用ESLint管理代码

Setup unit tests with Karma + Mocha? (Y/n)
是否安装单元测试

Setup e2e tests with Nightwatch(Y/n)?
是否安装e2e测试

接下来是一段安装过程，安装结束后，打开项目文件夹，目录结构如下

• node_modules
• build
• config

• src

  • assets
  • components

  • pages

    • App.vue
    • main.js

• static

  • ...
• package.json

安装依赖

切换至项目目录

cd projectname

安装模块

npm install module-name

运行项目

npm run dev

在浏览器内打开http://localhost:8080即可