如何使用vue-cli搭建SPA项目

将index.html与组件分开

嵌套路由

一，什么是vue-cli

============

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：

vue init webpack xxx

注1：xxx 为自己创建项目的名称，项目名不能用中文或大写字母

注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境

二，通过vue-cli脚手架构建SPA项目

=====================

1，安装vue-cli

---

在黑窗口执行

**npm install -g vue-cli

npm install -g webpack**

g是grobal的缩写

执行成功后会在node_global目录下产生以下文件

测试：

安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

再注意：vue -V中vue的后面有一个空格

黑窗口中按上键会执行上一次的命令

注：

注1：

npm install xxx -g

全局安装，下载依赖模块，并保存到%node_home%\node_global\node_modules目录下

npm install xxx -S

写入到package.json的dependencies对象，并保存到项目的node_modules目录

npm install xxx -D

写入到package.json的devDependencies对象，并保存到项目的node_modules目录

注2：

缩写命令的全称，注意大小写、-S,-D都是大写

i/install

-S/–save

-D/–save-dev

-g/–global

2，使用脚手架vue-cli(2.X版)来构建项目

---

步骤一.使用脚手架创建项目骨架

黑窗口 vue init webpack 项目名

执行成功后会出现一问一答

1.Project name：项目名，默认是输入时的那个名称spa1，直接回车

2.Project description：项目描述，直接回车

3.Author：作者，随便填或直接回车

4.Vue build：选择题，一般选第一个

4.1Runtime + Compiler: recommended for most users//运行加编译，官方推荐，就选它了

4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files

- render functions are required e