vue.js|使用vue-cli搭建SPA项目 javascript|前端

目录

一、vue-cli构建SPA项目及SPA项目结构介绍
利用vue-cli构建SPA
【vue.js|使用vue-cli搭建SPA项目】spa的访问过程：
安装vue-cli
二、SPA完成路由的开发
步骤：
三、嵌套路由
children：[ ]

一、vue-cli构建SPA项目及SPA项目结构介绍
利用vue-cli构建SPA
安装vue-cli命令-npm install (-g、-s、-d)
-g：js依赖会下载到node_global中
-s：会被打包（安装到dependencies里面）
-d：只会在开发环境中被依赖

spa的访问过程：
（1）访问index.html
（2）index.html通过main.js中的vue实例管理#app边界，同时指定App.vue模板
（3）App.vue中包含了图片以及锚点，而锚点与组件的对应关系存在router/index.js中，所以就指向了一个组件
（4）最终App.vue中就显示了logo图片以及helloworld.vue的内容

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 webpack -g

文章图片

文章图片

更改端口号8080——>8083：

文章图片

文章图片

二、SPA完成路由的开发步骤：
1、引入路由js依赖：main.js中已经完成
2、定义组件：呈现形式是以.vue文件展示
template标签中定义组件内容
通过export default指定组件的名字
3、定义路由与组件之间的对应关系
router/index.js文件中进行定义
4、获取路由对象：main.js中已经完成
5、挂载Vue实例：main.js中已经完成
6、定义锚点：App.vue 使用 router-view
7、触发事件：App.vue 使用 router-link to

Home.vue:

About.vue:

index.js:

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home' import About from '@/components/About'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/Home', name: 'Home', component: Home }, { path: '/About', name: 'About', component: About }, ] })

App.vue:

#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; }

运行：

文章图片

文章图片

三、嵌套路由 children：[ ]

AboutMe.vue：

AboutWebSite.vue：

index.js：

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home' import About from '@/components/About' import AboutMe from '@/components/AboutMe' import AboutWebSite from '@/components/AboutWebSite'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/Home', name: 'Home', component: Home }, { path: '/About', name: 'About', component: About, children:[ { path: '/AboutMe', name: 'AboutMe', component: AboutMe }, { path: '/AboutWebSite', name: 'AboutWebSite', component: AboutWebSite } ] }, ] })