1. 要操作的列表
2. 代码
- src/component/home/home.vue
<template>
<section>首页</section>
</template>
<script>
</script>
<style>
</style>
- src/component/news/news.vue
<template>
<section @click="clickHanler">新闻</section>
</template>
<script>
// 这里面写的是该组件的配置
export default {
// 数据写到这里
data() {
return {};
},
// 方法写在这里
methods: {
clickHanler() {
console.log('新闻被点击了')
}
}
}
</script>
<style>
</style>
- src/component/photo/photo.vue
<template>
<section>图片</section>
</template>
<script>
</script>
<style>
</style>
- src/component/App.vue
<template>
<main>
<p>{{ msg }}</p>
<router-view></router-view>
</main>
</template>
<script>
// 这里vue要求我们对外暴漏一个组件的配置项
// 这里因为template已经在上面独立编写了,vue-loader到时候会帮我们处理,所以配置项中就不用写template了
export default {
data() {
return {
msg: '测试vue文件是否可用'
}
}
}
</script>
<style scoped>
p {
font-size: 30px;
color: red;
}
</style>
- src/js/main.js
// 要把组件渲染到页面中, 我们就必须要导入Vue这个库, 然后才可以new他
// es6语法导入的Vue与我们在浏览器中使用的Vue有点小区别, 失去了浏览器模版编译功能,
// 失去该功能的原因是, 你使用es6语法, vue知道你一定使用了构建工具, 那么使用构建工具,
// 你应该会使用vue-loader, 使用了vue-loader他会在本地打包时把模版编译好,
// 然后在浏览器中直接使用编译好的模版, 相比咱们以往的方式性能会有提升.
// 导入第三包
import Vue from 'vue';
import VueRouter from 'vue-router';
// 手动启用Vue插件, 在以前VueRouter插件会自动调用use,
// 但是我们使用了模块化之后, window下没有Vue全局变量, 插件就无法自调use了
Vue.use(VueRouter);
// 导入我们编写的组件
import App from '../component/App.vue';
import Home from '../component/home/home.vue';
import News from '../component/news/news.vue';
import Photo from '../component/photo/photo.vue';
new Vue({
el: '#app',
// 以前这里写的是template与methods等等东西,
// 现在这些代码都统一放在了App.vue里面来写,
// App.vue就是咱们项目的根组件
render(c) {
return c(App);
},
// 路由配置
router: new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/news', component: News },
{ path: '/photo', component: Photo }
]
})
});
- src/.babelrc
{
"presets": [ "env" ],
"plugins":["transform-runtime"]
}
- src/webpack.config.js
const path = require('path');
const HtmlWP = require('html-webpack-plugin');
const CleanWP = require('clean-webpack-plugin');
module.exports = {
// 打包的入口文件
entry: path.resolve(__dirname, './src/js/main.js'),
// 输出
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
// 插件配置
plugins: [
new HtmlWP({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
}),
new CleanWP(['dist'])
],
// 模块配置
module: {
// 配置loader规则
rules: [
// css
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
// less
{
test: /\.less$/,
use: [ 'style-loader', 'css-loader', 'less-loader' ]
},
// html
{
test: /\.(html|tpl)$/,
use: [ 'html-loader' ]
},
// 静态资源引用
{
test: /\.(png|jpeg|gif|jpg|svg|mp3)$/,
use: [
{ loader: 'url-loader', options: { limit: 10240 } } // 小于10KB的打包
]
},
// js
{
test: /\.js$/,
use: [ 'babel-loader' ],
exclude: path.resolve(__dirname, 'node_modules')
},
// vue
{
test: /\.vue$/,
use: [ 'vue-loader' ]
}
]
}
};
- src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- 根目录执行webpack-dev-server
webpack-dev-server
网友评论