使用Vue_cli搭建SPA项目

一、如何使用Vue_cli搭建SPA项目

二、如何在SPA项目中使用路由

三、嵌套路由的使用

一、如何使用Vue_cli搭建SPA项目

1、Vue_cli的定义：

在分享使用Vue_cli搭建SPA项目之前先跟大家介绍Vue_cli是什么

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx，其中Vue_cli最早是来自工程学，在我们建房子时，我们会先搭建好一个脚手架，目的：使搭建房子的效率更高，使用Vue_cli搭建SPA项目也是如此

2、使用Vue_cli搭建SPA项目的步骤：

1、安装Vue_cli

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

2.1使用脚手架创建项目骨架（这个步骤就可以理解为用eclipse来创建一个Maven想项目）

2.2运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块

2.3启动并访问项目

1、安装Vue_cli

在cmd窗口依次执行以下两个命名：

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

执行效果：出现时间以及在上次解压node.js中的node_global出现文件夹就说明安装Vue_cli成功。

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

2.1使用脚手架创建项目骨架：

首先打开存放VUE项目的文件夹，我的VUE项目文件夹在下面这个文件夹中：

F:\Users\T440\Documents\HBuilderProjects

在这个文件中的搜索框中输入cmd，打开命名窗口，

之后进入到属于这个文件夹的cmd窗口，其次在cmd窗口中执行以下命名：

vue init webpack xxx(xxx为你要创建的SPA项目名)

注意：SPA项目名不能取太长，否则会出现取名不成功，遇到这种情况后，把该cmd窗口关闭，重复以上操作

执行以上命名之后，就会出现九个一问一答的问题：

“一问一答”模式
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 elsewhere//仅运行时，已经有推荐了就选择第一个了
5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件
6.Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。N 新手就不用了，但实际项目中一般都会使用，这样多人开发也能达到一致的语法
7.Set up unit tests：是否安装单元测试 N
8.Setup e2e tests with Nightwatch?：是否安装e2e测试 N
9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself //选择题：选第一项“Yes, use NPM”是否使用npm install安装依赖

全部选择好回车就进行了生成项目，出现如下内容表示项目创建完成：

Project initialization finished!

2.2运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块(这个步骤在之前已经完成)

2.3启动并访问项目：

输入以下指令来启动项目：

cd spa1
npm run dev

最终会出现成功successfully这个单词以及一个网址，说明使用Vue_cli搭建SPA项目成功。

二、如何在SPA项目中使用路由：

1、目标：实现前后端分离，使组件不在同一个页面中。

2、目标效果示意图：

3、目标效果：

4、步骤：

4.1:先改变端口号，因为本地的域名有多人使用，导致运行项目的效率慢。

4.2:先在项目的src文件下的componet文件中定义好组件，然后提供依赖

4.3:之后在index.js将组件提供组件的路由集合

4.4:最后在App.vue中定义组件的跳转路径（锚点和跳转链接）

4.5:重新运行项目

4.1:改变端口号：

在config的index.js中改变端口号:

注意：在改端口号之前要将项目终止（按ctrl+c将项目终止），重新改变端口号之后，输入npm run dev命名重新将项目启动即可

4.2:先在项目的src文件下的componet文件中定义好组件，然后提供依赖：

创建两个组件，一个是Home,另一个是About。

About组件也是如此：

4.3:之后在index.js将组件提供组件的路由集合：

4.4:最后在App.vue中定义组件的跳转路径（锚点和跳转链接）：

4.5:重新运行项目：

三、嵌套路由的使用

1、在关于中还有两个跳转，一个是关于本站，一个是关于站长，当点击关于本站是显示出

关于本站的内容，点击关于站长是显示出关于站长的内容。

2、目标效果：

3、实现目标效果思路：

3.1、定义两个组件，一个叫AboutMe，另一个叫做AboutWebsite

3.2、在项目的src文件下的componet文件中定义好组件，然后提供依赖

3.3、在关于组件中定义好锚点和路由链接

3.1、定义两个组件，一个叫AboutMe，另一个叫做AboutWebsite

3.2、在项目的src文件下的componet文件中定义好组件，然后提供依赖：
在这一步中最重要的是要在About的路由集合中定义两个子路由。

3.3、在关于组件中定义好锚点和路由链接：

最后就可以运行出效果：

今天的知识就分享到这里了，希望能够帮助到你!