使用Vue-cli搭建SPA项目

前言：今天要分享的知识是使用Vue-cli搭建SPA项目

码字不易，转载请说明！！！

Vue-cli搭建SPA项目的构建前提是nodeJS环境已近搭建完毕，在博主的上一篇博客中有详细写到nodeJS环境的搭建，现如下提供

(43条消息) NodeJS环境搭建_笑看人生十余载的博客-优快云博客

---

目录

一、案例

二、安装Vue-cli 

什么是Vue-cl？

安装Vue-cli 

三、使用脚手架Vue-cli来构建项目

①使用脚手架创建项目骨架

②启动项目

③导入spa项目

四、将index.html与组件分开以及嵌套路由

分析spa项目工作原理

​

将index.html与组件分开

嵌套路由

页面展示

四、总结

---

一、案例

二、安装Vue-cli 

什么是Vue-cl？

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

vue init webpack xxx

注1：xxx 为自己创建项目的名称

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

安装Vue-cli 

 npm install -g vue-cli
 npm install -g webpack

注1：安装成功后，会出现如下文件
       E:\installPackage\Node\node-v10.15.3-win-x64\node_global
                 vue
                 vue.cmd 
                 vue-init
                 vue-init.cmd
                 vue-list
                 vue-list.cmd
注2：安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功

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目录  
 

三、使用脚手架Vue-cli来构建项目

①使用脚手架创建项目骨架

可以理解为使用eclipse创建一个maven的web项目

打开HBuilderX建项目的文件所在目录

进入你项目对应的文件目录，进入cmd窗口，输入vue init webpack （spa项目名字，自定义）

 #此命令用于创建SPA项目，它会在当前目录生成一个以“spa”命名的文件夹

 #spa即为项目名，项目名不能用中文或大写字母，然后终端会出现“一问一答”模式

注1：cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致

        修改cmd窗口字符编码为UTF-8，命令行中执行：chcp 65001

        切换回中文：chcp 936

        这两条命令只在当前窗口生效，重启后恢复之前的编码

“一问一答”模式 

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

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

3.Author&#