Webpack配置Vue
现在我们希望在项目中使用Vue.js，那么必须需要对其有依赖，所以先进行安装。
注意：
因为我们在后续实际项目中也是需要Vue的，所以安装时并不是开发时依赖，而是运行时依赖。
npm install vue --save
刚开始学习Vue，都是通过script标签引入源码的方式，它不是通过模块化的方式管理Vue的，既然Webpack支持模块化，那么可以将Vue作为模块安装。
安装Vue.js的三种方式：
- 直接下载，通过script标签引入；
- CDN引入；
- npm安装。
安装后的vue放在node_modules文件夹中。
Vue的两类版本：
1、runtime-only
代码中不可以有任何的template
2、runtime-compiler
代码中可以有template
那么如何将默认的runtime-only版本改为runtime-conpiler版本呢？修改webpack.config.js文件中的配置。
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
// JS中的正则表达式是不需要引号的
use: [
{loader: "style-loader"},
{loader: "css-loader"}
]
}
]
},
resolve: {
// 在Webpack配置Vue中，选择runtime-compiler版本，当你在main.js中import Vue from ‘vue‘时，不会按照默认方式，而是按照指定的vue.esm.js来找
alias: {
‘vue$‘: ‘vue/dist/vue.esm.js‘
}
}
}
main.js
import {sum, mul} from "./js/mathutil.js"
console.log(sum(10, 20));
console.log(mul(10, 20));
// 导入css模块
require("./css/mycss.css");
// 使用vue进行开发
import Vue from "vue"
const app = new Vue({
el: ‘#app‘,
data: {
message: "Hello, Webpack Vue.js"
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1、目录结构 2、webpack.config.js配置入口出口 3、npm init生成package.json 4、npm install webpack --save-dec本地安装webpack -->
<!-- 4、loader配置css文件 5、npm run build重新打包js、css模块到bundle.js文件 6、在index.html中引入 -->
<!-- Webpack配置Vue -->
<div id="app">
<span>{{message}}</span>
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
使用Vue的终极方案
SPA（Single Page Application）单页面应用：只有一个html页面（固定的）。
多页面，通过路由vue-router跳转。
模块化、组件化。
在VSCode中写.vue文件，安装Vetur插件，输入d，按tab键自动生成Vue文件的模板。
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
由于.vue是特殊的文件格式，和css、图片格式一样，都需要loader。
npm install vue-loader vue-template-compiler --save-dev
代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <App></App>组件的模板代码替换了这个div -->
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
package.json
{
"name": "2020-07-18-vuedemo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.6.0",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"style-loader": "^1.2.1",
"vue": "^2.6.11"
}
}
main.js
import {sum, mul} from "./js/mathutil.js"
console.log(sum(10, 20));
console.log(mul(10, 20));
// 导入css模块
require("./css/mycss.css");
// 使用vue进行开发
import Vue from "vue"
import App from ‘./vue/App.vue‘
const app = new Vue({
el: ‘#app‘,
template: "<App></App>",
components: {
App
}
// 1、引用子组件App 2、在template中声明<App></App>组件
})
App.vue
<template>
<div class="active">
<span class="cls">{{message}}</span><br>
<button v-on:click="btnClick">按钮</button>
</div>
</template>
<script>
export default {
name: ‘App‘,
data() {
return {
message: ‘Hello Vue 最终版.‘
}
},
methods: {
btnClick() {
console.log("单击事件执行");
}
}
}
</script>
<style>
.cls {
font-size: 30px;
font-weight: 400;
color: blue;
}
</style>
webpack.config.js
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"}
]
},
{
test: /\.vue$/,
use: {loader: ‘vue-loader‘}
}
]
},
resolve: {
alias: {
‘vue$‘: ‘vue/dist/vue.esm.js‘
}
},
plugins: [new VueLoaderPlugin()]
}