边学边写webpack4 -- 加入vue
2019-11-13 本文已影响0人
迪迪妮粑粑
一、安装各种包
1.cnpm install vue --save (必须)
2.cnpm install vuex --save （非必须，单页应用全局状态管理）
3.cnpm install vue-router --save （非必须，如果不使用路由）
4.cnpm install vue-loader --save-dev （必须，否则无法编译.vue的文件）
5.cnpm install vue-template-compiler --save-dev （配合vue-loader，不装会报错）
vue-loader15.0后，必须在webpack.config.js中加入以下代码
var VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [
new VueLoaderPlugin()
]
二、项目文件
1.index.html 仅为渲染的html (配置在webpack的HtmlWebpackPlugin)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
2.enter.js 入口文件 (配置在webpack的entry)
import Vue from 'vue'
import App from './app'
// import vueRouter from 'vue-router'
import './static/css/main.css';
import "./static/scss/main.scss";
// Vue.use(vueRouter);
new Vue({
el: '#root', //挂载点
// router, // 路由
//写法1
// template: '<App/>', //模板
// components:{
// App
// }
//写法2
render: h => h(App)
});
3.App.vue 入口模板, 路由等具体代码放这里
<template>
<!-- <router-view /> -->
<div>{{abc}}</div>
</template>
<script>
export default {
data(){
return {
abc:123
}
},
created(){
}
}
</script>
<style>
</style>
4.路由>>
