版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chencl1986/article/details/85040372
示例代码请访问我的GitHub:
https://github.com/chencl1986/vue-tutorial
代码示例:/lesson13/
创建Vue项目的文件夹结构
├── package.json
├── webpack.config.js # Webpack配置文件
├── index.html # 项目HTML文件
├── css # 项目样式文件夹
├── dest # 项目打包后输出文件夹
├── src # 项目开发文件夹
│ ├── vm.js # 项目入口文件
│ ├── router.js # 路由配置文件
│ ├── components # 组件文件夹
Webpack基本配置
const path=require('path');
module.exports={
mode: 'development', // 开发模式
entry: './src/vm.js', // 入口文件配置
output: {
path: path.resolve(__dirname, 'dest'), // 输出文件夹
filename: 'bundle.min.js' // 打包输出的文件名
},
module: {
rules: [
{ // 处理CSS
test: /\.css$/i,
use: ['style-loader', 'css-loader']
}
]
}
};
HTML文件
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- name属性的值对应路由配置中components中的属性名 -->
<router-view name="header"></router-view>
<!-- 渲染默认视图 -->
<router-view></router-view>
</div>
</body>
<!-- 引用打包后的js文件 -->
<script src="dest/bundle.min.js" charset="utf-8"></script>
</html>
入口js文件vm.js
// 引入Vue的es module模块,使用vue-cli时,因为配置了alias,所以可以直接引用vue
import Vue from 'vue/dist/vue.esm';
// 引入VueRouter模块
import VueRouter from 'vue-router';
// 引入路由配置
import router from './router';
// 引入项目样式表
import '../css/main.css';
// 安装VueRouter插件
Vue.use(VueRouter);
// 配置Vue应用
const vm=new Vue({
el: '#app',
data: {},
router
});
路由配置router.js
// 引入VueRouter模块
import VueRouter from 'vue-router';
// 引入组件
import Header from './components/header';
import Home from './components/home';
import News from './components/news1';
export default new VueRouter({
routes: [
{
path: '/index', // 路由的路径
name: 'index', // 路由名称,可选属性,定义后可以用其实现跳转
components: { // 通过components属性显示多个组件
header: Header, // 命名视图,对应<router-view name="header"></router-view>
default: Home // 默认视图,对应<router-view></router-view>
}
},
{
path: '/news',
name: 'news',
components: {
header: Header,
default: News
}
}
]
})
编译项目
在命令行使用webpack命令就可以进行编译,在浏览器中打开index.html就可以查看效果。