小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
前言
话接上一回，本章要进入到引入vue的工作中来了
准备工作
我们已经弄好了大题的解构，接着就该引入Vue了，重头戏又又又来了
安装依赖
npm i vue-loader （安装这个组件）
npm i vue-style
npm i resolve-url-loader
npm i clean-webpack-plugin //使用该插件 会清理每次打包后, 过去遗留在dist中的旧代码
npm i mini-css-extract-plugin
npm i file-loader
webpack.config.js
// 使用该插件,会自动创建并更新html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//使用该插件 会清理每次打包后, 过去遗留在dist中的旧代码
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 使用该插件 , 会解析vue文件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path')
const createLoader = (name, options) => {
return {
loader: `${name}-loader`,
options: options
}
}
// 样式引用
const cssLoader = (type) => {
const options = {
sourceMap: false
}
return [
createLoader('vue-style', options),
{
loader: MiniCssExtractPlugin.loader,
options: { hmr: true }
},
createLoader('css', options)
].concat(type === 'css' ? [] : [].concat(type === 'sass' ? [{ loader: 'resolve-url-loader' }] : [])
.concat([createLoader(type)]))
}
module.exports = {
/* webpack 入口起点*/
entry: "./index.js",
/* webpack 输出*/
output: {
//输出文件名
filename: "./test.js",
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
transformAssetUrls: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href',
embed: 'src'
}
}
},
{
test: /\.(js|ts)$/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.css$/,
use: cssLoader('css')
},
{
test: /.less$/,
use: cssLoader('less')
},
{
test: /\.sc|ass$/,
use: cssLoader('sass')
}
],
},
/* 配置webpack-dev-serve */
devServer: {
contentBase: './dist'
},
/* 插件配置 */
plugins: [
/* HTML 生成插件 */
/* 这里要配置好 templet是文件路径 */
/* filename 文件名 templet配置错了 样式啥的会丢掉 尴尬 */
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
inject: true
}),
new CleanWebpackPlugin(),
new VueLoaderPlugin()
],
mode: "development",
// 配置模块如何被解析, 即设定相对应模块的解析规则
resolve: {
// 自动补全的扩展名
extensions: ['.js', '.vue', '.json'],
// 默认路径代理
// 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
// 这样可以使之后在开发项目的时候, 引用文件时不必关注不同层级的问题
alias: {
'@': path.join(__dirname, './', 'src'),
'@api': path.join(__dirname, './', 'src/api'),
'@styles': path.join(__dirname, './', 'src/styles'),
'@config': path.join(__dirname, './', 'config'),
'vue$': 'vue/dist/vue.common.js',
'@components': path.join(__dirname, './', 'src/components')
}
}
};
package.json
修改 index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
修改webpack配置项
既然我们要使用Vue了 那我们要修改下 webpack.config.js 入口和输出的地方的内容了
首先我们要新建一个 src文件夹（个人命名如此 你可以不要和我一样，不过还是规范一点比较好）
并且移入我们的 index.js 改成 main.js
webpack.config.js 修改
webpack.config.js 下的
/* webpack 入口起点*/
entry: {
app: "./src/main.js"
},
/* webpack 输出 webpack 可以不需要*/
output: {
path: path.resolve(__dirname, './dist'), // 项目的打包文件路径
publicPath: '/dist/', // 通过devServer访问路径
filename: 'build.js' // 打包后的文件名
},
devServer: {
historyApiFallback: true,
overlay: true
}
配置一下 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>
<script src="/dist/build.js"></script>
</body>
</html>
然后在启动一下确定是否无误
package.json添加（有的话就不要加了）
"scripts": {
// webpack-dev-server会自动启动一个静态资源web服务器 --hot参数表示启动热更新
"dev": "webpack-dev-server --open --hot",
"build": "webpack --progress --hide-modules"
},
引入vue
首先安装一下vue
npm i vue --save
修改 main.js 和 index,html , 以及webpack.config.js文件
- main.js
import Vue from 'vue';
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
- index.html
<!DOCTYPE html>
<html lang="en">
<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>
<div id="app">
{{message}}
</div>
<script src="/dist/build.js"></script>
</body>
</html>
- webpack.config.js
resolve: {
// 添加这里就好
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
ps: package.json 这边需要先运行 dev 在运行 open 不然 就只能出现 {{ mesgage }} 而不是 hello world
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"open": "webpack-dev-server --hot --open",
"build": "webpack --mode production"
},
引入 css
在src目录下新建style文件夹, 新建common.scss,写个样式, 然后在main.js中引入 common.js
body {
background: red;
min-width: 1200px;
}
mian.js
import '@styles/common.scss';
webpack.config.js
plugins: [
new MiniCssExtractPlugin(),
],
引入 App.vue
安装一下依赖
npm install vue-template-compiler --save-dev
main.js
import Vue from 'vue';
import App from './App.vue';
import '@styles/common.scss';
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
App.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
<input type="text" v-model="msg" @input="change">
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js'
}
},
methods: {
change(){
console.log(this.msg)
}
}
}
</script>
<style lang="scss">
#app {
h1 {
color: green;
}
}
</style>
到这里就告一段落啦！
接下来就要引入路由和vuex了！
