首先把package.json贴出来，这里很多插件存在版本区别，因此要特别注意版本，不是所有的安装最新的都行
{ "name": "life_manager", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "dev": "webpack-dev-server --contentBase src --hot" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "jquery": "^3.3.1", "vue": "^2.5.17", "vue-router": "^2.8.1", "webpack": "^3.10.0" }, "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.24.1", "css-loader": "^1.0.0", "file-loader": "^2.0.0", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.23.0", "url-loader": "^1.1.1", "vue-loader": "^13.7.3", "vue-template-compiler": "^2.5.17", "webpack-dev-server": "^2.11.3" } }
其次是webpack.config.js文件
const path = require("path");
const htmlWebpack = require("html-webpack-plugin");//首先是这里要引用
module.exports = {
entry: path.join(__dirname, './src/main.js'),//指定入口文件
output: {
path: path.join(__dirname, './dist'),//指定输出的文件路径
filename: 'bundle.js'//指定输出的文件名
},
plugins: [
new htmlWebpack({//其次是这里要实例化
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
module: {//配置所有的第三方模块加载器
rules: [
{
//配置处理.css文件的第三方loader规则
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{ test: /.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=2000&name=[hash:8]-[name].[ext]' },
{ test: /.js$/, use: 'babel-loader', exclude: /node_modules/ },
{ test: /.vue$/, use: 'vue-loader' }
]
},
resolve:{
alias:{
// "vue$":"vue/dist/vue.js"
}
}
}
在看看项目结构
index.html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="./bundle.js"></script> </head> <body> <div id="app"></div> </body> </html>
main.js代码如下：
import $ from 'jquery' import './css/index.css' import Vue from 'vue' import VueRouter from 'vue-router' import user from './vue/user.vue' import role from './vue/role.vue' import app from './vue/app.vue' Vue.use(VueRouter); var router = new VueRouter({ routes: [ { path: "/user", component: user }, { path: "/role", component: role }, ] }); var v1 = new Vue({ el: "#app", render: c => c(app), router })
app.vue代码如下：
<template>
<div>
<h2>收支管理系统</h2>
<router-link to="/user">用户管理</router-link>
<router-link to="/role">角色管理</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
.babelrc内容如下：
{ "presets": [ "env","stage-0" ], "plugins": [ "transform-runtime" ] }
常用技术点说一下
- nrm 的使用，用于设置镜像的地址
- webpack-dev-server 用于开发过程，热部署，不用每次重启
- html-webpack-plugin 用于将html加载到内存中，而非物理磁盘
- style-loader css-loader 用于样式表的解析
- url-loader file-loader 用于样式中存在图片、字体等url地址的处理
- babel-core 用于ES6高级语法解析
- vue-loader vue-template-compiler 用于解析独立的vue文件