文件目录
│ .babelrc
│ index.html
│ package.json
├─build
│ webpack.base.js
│ webpack.dev.js
└─src
│ App.vue
│ index.js
├─router
│ index.js
└─views
App.vue
home.vue
webpack配置（入口配置、输出配置，webapck插件加载，文件解析配置等）
//build/webpack.base.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'../dist'),
filename:'compiled/js/[name].[chunkhash:8].js',
chunkFilename:'compiled/js/[name].[chunkhash:8].js'
},
resolve:{
extensions:['.js','.vue','.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module:{
rules:[
{
test: /.vue$/,
loader: 'vue-loader',
},
{
test: /.js$/,
loader: 'babel-loader',
},
]
},
plugins:[
new htmlWebpackPlugin({
template:'./index.html',
hash:true
}),
new VueLoaderPlugin()
]
}
devServer 配置
//build/webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.base');
const path = require('path');
module.exports = merge(common,{
devtool:'source-map',
devServer:{
contentBase:path.join(__dirname,'dist'),
historyApiFallback:true,
host:'localhost',
port:8080,
open:false,
proxy:{
}
}
})
Vue路由配置
src/router/index.js
import Vue from 'vue';
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
name: 'home',
path: '/',
component: resolve => require(['./../views/home'], resolve),
}
]
})
Vue 的一个模板文件
// src/views/home.vue
<template>
<div class="container">
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name: "ForeEnd",
data(){
return {
msg:'abc'
}
}
}
</script>
<style scoped>
</style>
Vue 路由的挂载点文件(路由每变动一次，都会将当前路由文件塞到router-view中)
// src/App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
Vue的路口文件或者说是Vue的全局文件
// src/index.js
import Vue from 'vue';
import router from './router'
import App from './App'
new Vue({
router,
components:{App},
template:'<App/>'
}).$mount('#app')
Vue文件渲染从App.vue->index.html
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
整个项目的全局配置文件(项目启动命令、项目依赖)
// package.json
{
"name": "webpack-vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack-dev-server --config build/webpack.dev.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^2.1.1",
"postcss-loader": "^3.0.0",
"autoprefixer": "^9.6.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.3",
"webpack-dev-server": "^3.7.1",
"webpack-merge": "^4.2.1",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue": "^2.6.11",
"vue-router": "^3.4.3"
}
}
最后执行以下命令安装依赖
npm install 或者 cnpm install(如果安装了得话)
npm run start //启动 浏览器打开localhost:8080就可以访问首页了