使用vue-cli创建webpack-simple骨架并配置vue-router路由模块

1.vue路由的官方解释：

      Vue Router是 Vue.js的官方路由器。它与Vue.js核心深度集成，使使用Vue.js轻松构建单页应用程序变得轻而易举。功能包括：

• 嵌套路线/视图映射
• 模块化，基于组件的路由器配置
• 路由参数，查询，通配符
• 查看由Vue.js过渡系统提供动力的过渡效果
• 细粒度的导航控制
• 与自动活动CSS类的链接
• HTML5历史记录模式或哈希模式，在IE9中具有自动备用
• 可自定义的滚动行为

2. 使用vue-cli搭建webpack-simple基础项目骨架

/*
*    vue cli 官方支持的项目骨架列表
*   ★  【browserify】 - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
*   ★  【browserify-simple】 - A simple Browserify + vueify setup for quick prototyping.
*   ★  【pwa】 - PWA template for vue-cli based on the webpack template
*   ★  【simple】 - The simplest possible Vue setup in a single HTML file
*   ★  【webpack】 - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
*   ★  【webpack-simple】 - A simple Webpack + vue-loader setup for quick prototyping.
*/  
安装node.js
node -v                          //查看node版本 如果看到就表示安装成功
npm install vue-cli -g   //使用node.js全局安装vue-cli如果安装失败可尝试淘宝镜像
mkdir mytest                 //在当前目录下创建一个文件夹用于存放项目
cd mytest                      //进入项目文件夹
vue init webpack-simple mytestproject  //使用webpack-simple骨架模版创建一个名为 mytestproject 的vue项目

注意：这里选择创建项目的一些基本配置你可以根据需要修改或一路回车即可，具体选项意思自行百度

 

cd mytestproject           //进入项目文件夹
npm install                //安装项目的依赖文件没有报错就说明已经安装完毕

npm run dev                //启动当前项目看到以下界面就说明项目已经启动成功

浏览器端：

 

命令行界面：

 

 

4.使用VsCode 打开项目（大致效果）

 

 

5.安装vue-router路由模块：

npm install vue-router -s   //全局安装vue-router 路由模块

 

6.编写一个demo测试路由功能：

   在做demo之前我们先明确下本次要做的静态路由需要达成的目标：

    目标：我们需要在网站启动首屏展示如下页面，页面上有两个按钮分别是 首页和 商品页，要求点击按钮后在内容展示区会根据要求展示对应的页面内容

 

  

实现步骤：

   1.在src下创建views文件夹用于存放视图页面

         

   2.在views文件夹下创建一个home视图页面并添加如下代码

         

       

@author: java.boy
@desc：Home page
@date: 2020-05-21 14:21:37
@Email：395501344@qq.com
<template>
<div>
    <h1><b>HOME</b></h1>
   <h5><b>{{msg}}</b></h5>
</div>
</template>


<script>
export default {
components: {},
data() {
return {
    msg:'这里展示home页面的内容'
}
}
}
</script>
<style scoped>

</style>

 

 

   3.在views文件夹创建一个products视图页面并添加如下代码

         

@author: java.boy
@desc：Products page
@date: 2020-05-21 14:26:15
@Email：395501344@qq.com
<template>
<div>
   <h1><b>PRODUCTS</b></h1>
   <h5><b>{{msg}}</b></h5>
</div>
</template>

<script>
export default {
components: {},
data() {
return {
   msg:'这里展示商品页面的内容'
}
}
}
</script>
<style scoped>


</style>

 

 4.在项目src目录下创建routes.js路由表文件,并把之前写好的视图组件引入编写静态路由表

         

/*
* author: java.boy
* desc：routes.js 静态路由表
* date: 2020-05-21 14:26:15
* Email：395501344@qq.com
*/

//1.引入写好的视图页面
import Home from './views/Home.vue'
import Products from './views/Products.vue'


//2.暴露一个【静态】的路由数组
export const routes = [
   //home页面
   {
       path:'/home',
       name:'myHome',
       component:Home
   },
   //商品页面
   {
       path:'/Products',
       name:'myProducts',
       component:Products
   }
]

 

   6.在main.js(vue入口)中添加路由模块并且实例化后添加到vue实例当中

   

/*
* author: java.boy
* desc：main.js
* date: 2020-05-21 14:54:15
* Email：395501344@qq.com
*/


import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'  // 1.引入路由模块
import {routes} from './routes'     // 2.引入静态路由表


//3.让vue载入路由模块
Vue.use(VueRouter);
//4.创意一个VueRouter模块实例
const router = new VueRouter({
   routes:routes
})


new Vue({
 el: '#app',
 router:router, //5.把router实例放入到vue实例中
 render: h => h(App)
})

 

 

   7.编写App.vue内容放入<router-link> 标签和<router-view> 构建首屏页面

@author: java.boy
@desc：App page
@date: 2020-05-21 15:01:03
@Email：395501344@qq.com
<template>
 <div id="app">

   <!--1.添加两个路由连接分别指向不同页面-->
   <router-link to="/home">首页</router-link>
   <router-link to="/products">商品页</router-link>

   <!--2.在页面中添加路由视图标签以便展示内容-->
   <router-view></router-view>
 </div>
</template>


<script>
export default {
 name: 'app',
 data () {
   return {
     
   }
 }
}
</script>


<style>


</style>

 

 运行效果展示 ：

npm run dev //启动当前项目

 点击首页

 

点击商品页

 

THE END

 

如果你觉得这篇文章对你有帮助可以动动小手给作者点个关注或反手来个赞，你的鼓励对作者来说很重要，后续我会不定期更新更多内容。

+Q群交流 ：189195811（或搜索 Java程序猿）