在webpack基础上使用vuejs基础功能
前言（前置环境配置）
本文章基于的项目的目录结构以及初始化npm，初始化webpack环境等前置内容，请参考这篇文章：传送门
step 1 安装vue
运行npm i vue
先检查不使用.vue文件时项目运行情况，排除其它可能的干扰。
修改./src/index.html文件如下：
<!DOCTYPE html>
<html>
<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>
<h1>Index</h1>
<div id="app">
{{msg}}
</div>
</body>
</html>修改入口文件entry.js如下
import './css/index.css' import './js/index.js'
在./js/index.js中增加相关配置
/**
* import Vue from 'vue' 所默认导入的Vue组件其实是不全的,或者对于刚开始学习和练习的人来说是不全的
* 所以这里实际上引用的是./node_modules/vue/dist/vue.js 其中./node_modules按语法可省略
*/
import Vue from 'vue/dist/vue.js'
var app = new Vue({
el:'#app',
data:{
msg:'测试'
}
})使用npm run dev打开网站，能在页面上看到对应的文本“测试”，则说明至此为止项目一切配置正常。
step 2 安装解析.vue的loader
显然，Vue.js还没有像.css和图片资源，字体资源那样统一前端界与普及，所以我们应该首先考虑Vue官方是否提供了在Webpack下使用Vue的信息。因此，我们以 .vue site:vuejs.org 进行搜索
搜素结果中的第一个在阅览后便给出了我们想要的答案：传送门
切换到左侧目录中的 起步-手动设置 章节，按照官方文档进行操作。
安装：npm install -D vue-loader vue-template-compiler
按照官方文档引入配置，在我们的项目中完成配置后配置文件webpack.config.js应当如下：
const path = require("path"); //路径管理模块,使用它可以高效获取项目路径,避免路径错误.
//导入html-webpack-plugin以便之后配置
var htmlWebpackPlugin = require("html-webpack-plugin");
//为开启热部署引入webpack模块
const webpack = require("webpack");
//引入.vue支持
const VueLoaderPlugin = require('vue-loader/lib/plugin')
/**
* 在这个对象中配置webpack的运行参数
*/
var config = {
//指定集成引入资源的入口js文件
entry: path.join(__dirname, "./src/entry.js"),
//webpack处理后输出的文件的配置
output: {
path: path.join(__dirname, "./dist"), //指定输出的目录
filename: "bundle.js" //输出的文件的文件名
},
module: {
rules: [
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.(jpg|jpeg|png|gif)$/, use: "url-loader" },
{ test: /\.(woff|woff2|ttf|eot|svg)$/, use: "url-loader" },
//为.vue添加解析
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
//配置webpack-dev-server的运行参数
devServer: {
open: true, //运行后自动打开浏览器
port: 3000, //启动的服务器的监听端口
//contentBase: path.join(__dirname, "./src"), //指定托管的网站文件的根目录
hot: true //启用热更新
},
//用来引入webpack的插件
plugins: [
//引入html-webpack-plugin插件 这里的htmlWebpackPlugin是第四行require进来的
new htmlWebpackPlugin({
//指定要被插件处理的页面
template: path.join(__dirname, "./src/index.html"),
//指定页面处理后的名字
filename: "index.html"
}),
new webpack.HotModuleReplacementPlugin(),
//为Vue而引入
new VueLoaderPlugin()
]
};
/**
* 向外暴露配置webpack的对象
*/
module.exports = config;至此我们已经按照官方文档完成了vue相关loader的配置，让我们来测试是否成功吧。
创建./src/login.app，我们假装这是一个登录组件，内容如下：
<template>
<div>
<p>登录组件</p>
</div>
</template>
<script>
</script>
<style>
</style>修改./src/js/index.js文件，修改后内容如下：
import Vue from "vue/dist/vue.js";
import login from "../login.vue";
var app = new Vue({
el: "#app",
data: {
msg: "测试"
},
render: function(createEl) {
return createEl(login);
}
});保存后再去查看网页，会发现原本的“测试”文本消失了，变成了“登录组件”，意味着Vue与Webpack结合成功。
step 3 安装vue-router
官方文档：传送门 。
我们希望创建如下一个简单网页来测试对vue-router的安装是否成功：在主页上有“登录”和“注册”两个按钮，点击登录展示登录组件，点击注册展示注册组件，在此过程中页面不跳转。
按照官方文档，先安装vue-router模块：npm i -S vue-router
创建VueTemplates文件夹，并在其下创建login.vue和register.vue，把它们假装是登录和注册组件。
./src/VueTemplates/login.vue
<!-- 注册组件基本相同,不再赘述 -->
<template>
<div>
<p>登录组件</p>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
</style>./src/app.vue
<template>
<div>
<h1>App</h1>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
//按照官方文档要求引入vue-router
import Vue from "vue/dist/vue.js";
import VueRouter from "vue-router";
Vue.use(VueRouter);
//引入我们自定义的组件
import loginT from "./VueTemplates/login.vue";
import registerT from "./VueTemplates/register.vue";
//路由控制
var router = new VueRouter({
routes: [
{ path: "/login", component: loginT },
{ path: "/register", component: registerT }
]
});
export default {
// 为app这个template模板设置路由控制
router
};
</script>
<style scoped>
</style>修改./src/index.js，引入app模板并将其渲染到页面上。
import Vue from 'vue/dist/vue.js'
//引入app.vue模板
import appT from '../app.vue'
var app = new Vue({
el:'#app',
data: {
msg:'Vue引入测试'
},
//将app渲染到页面上
render: (createEl) => {return createEl(appT)}
})npm run dev后应该能实现我们一开始预计想要的功能。至此说明vue-router模块引用成功。