持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
一、准备项目
1、新建项目目录：mkdir vuetest
2、进入项目：cd vuetest
3、建立package.josn npm init -y
二、安装webpack
4、按照webpack官网，安装webpack ： npm install webpack webpack-cli -D
5、新建dist、和src 文件夹
6、参照官网安装loash：npm install --save lodash
6、新建src/index.js(安装官网输入内容）和dist/index.html(在里引入bundle .js)
7、在package.json里
+ "private": true,
- "main": "index.js",
8、新建webpack.config.js
9、设置webpack文件配置：运行：npx webpack --config webpack.config.js
10、在package.json里添加："build": "webpack"
11、运行：npm run build 测试
三、安装loader
12、安装支持css样式：npm install --save-dev style-loader css-loader
13、在webpack.config.js，添加
module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
14、参照官网新建style.css,并添加css样式
15、参照官网修改index.js
16、npm run build
四、安装server
17、安装：npm install --save-dev webpack-dev-server
18、参照官网修改webpack.config.js
19、修改package.json：添加："start": "webpack-dev-server --open",
20、在webpack.config.js里添加开发模式
21：运行：npm start 测试
五、安装jsx转义
22、安装babel转义：npm install babel-loader @babel/core @babel/preset-env --save-dev
23、新建.babelrc 并添加 {
"presets": ["@babel/preset-env "]
}
24、在webpack.config.js里添加{test: /.js|jsx$/,use: 'babel-loader',exclude: /node_modules/}
六、安装vue
25、安装vue:npm install --save vue
26、安装vue依赖：npm install --save-dev vue-loader vue-template-compiler
27、安装文件依赖：npm install --save-dev file-loader url-loader
28、配置webpack.config.js
根据webpack官网添加支持图片的loader
{ test:/.(png|jpe?j|gif|svg)(?.*)?$/, loader:'url-loader', options:{ limit:10000, name:'img/[name].[ext]?[hash]' }
添加vue的支持
{ test:/.vue$/, loader:'vue-loader' },
添加编译路径：
29、添加编译插件：
注：webpack4配置需要包含VueLoaderPlugin const VueLoaderPlugin = require('vue-loader/lib/plugin') 然后输出在 plugins: [ new VueLoaderPlugin() ]
在webpack.config.js头部定义插件：const VueLoaderPlugin = require('vue-loader/lib/plugin');
在插件内输出：
plugins: [ new VueLoaderPlugin() ]
七、测试vue
30、在src新建App.vue,内容如下：
<template>
<div id="app">
{{text}}
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
text: 'this is vue'
}
}
}
</script>
<style scoped>
#app {
color: red;
}
</style>
修改index.js，内容如下：
import Vue from 'vue';
import App from './App.vue';
new Vue({
el:"#ex",
components:{App},
template: '<App />'
})
修改index.html
在body里添加
31、测试：npm start
备注：最终的webpack.config.js:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode:'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{test: /.js|jsx$/,use: 'babel-loader',exclude: /node_modules/},
{
test:/\.(png|jpe?j|gif|svg)(\?.*)?$/,
loader:'url-loader',
options:{
limit:10000,
name:'img/[name].[ext]?[hash]'
}
},
{
test:/\.vue$/,
loader:'vue-loader'
}
]
},
resolve:{
//引入路径是不用写对应的后缀名
extensions: ['.js', '.vue', '.json'],
//缩写扩展
alias:{
//正在使用的是vue的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本
'vue$':'vue/dist/vue.esm.js',// 'vue/dist/vue.common.js' for webpack 1
//用@直接指引到src目录下，如：'./src/main'可以写成、'@/main'
'@': path.resolve(__dirname,'./src'),
}
},
plugins: [
new VueLoaderPlugin()
],
devServer: {
contentBase: './dist'
}
};
最后的.babelrc
{
"presets": ["@babel/preset-env"]
}
最后package.json
{
"name": "vuetest",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
},
"dependencies": {
"lodash": "^4.17.15",
"vue": "^2.6.10"
}
}
最后的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="ex"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
