内容简介：上节：编写一个plugin本节开始用之前介绍的知识来搭建个vue开发环境，其实如果把基础篇的那些内容掌握，配合
上节：编写一个plugin
本节开始用之前介绍的知识来搭建个vue开发环境，其实如果把基础篇的那些内容掌握，配合 文档 ，完全可以自己搭建出来。
开始
新建一个空文件夹，并在文件夹下新建如下基本文件：
.gitignore：
node_modules dist .idea .vscode
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
package.json：
{
"name": "webpack-train",
"version": "1.0.0",
"description": "webpack4",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server"
},
"keywords": ["webpack4"],
"author": "Madao",
"license": "ISC"
}
然后新建src目录，并在src下新建main.js(入口)和App.vue(根组件):
src/main.js:
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#root',
render: h => h(App)
});
src/App.vue:
<template>
<div>
<h1>hello {{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
msg: 'webpack'
}
}
}
</script>
在根目录下新建webpack.config.js:
const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
entry: './src/main.js',
// 起node服务
devServer: {
port: 4200
},
module: {
rules: [{
// 识别.vue文件
test: /\.vue$/,
loader: 'vue-loader',
}, {
// 用于识别vue文件中的script块
test: /\.js$/,
loader: 'babel-loader',
}, {
// 用于识别vue文件中的style块
test: /\.less$/,
/*
vue-style-loader基于style-loader
https://www.npmjs.com/package/vue-style-loader
*/
use: ['vue-style-loader', 'css-loader', 'less-loader']
}, {
test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
loader: 'url-loader'
}]
},
plugins: [
new HTMLPlugin({
template: './index.html'
}),
// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块
new VueLoaderPlugin()
]
};
新建babel.config.js:
const presets = ["@babel/env"];
module.exports = { presets };
这是基本的开发环境配置，先安装下依赖看能否跑起来：
npm i webpack webpack-cli webpack-dev-server vue-loader vue-style-loader vue-template-compiler @babel/core @babel/preset-env babel-loader css-loader file-loader url-loader html-webpack-plugin less less-loader vue-loader -D
npm i vue
安装完成后npm run dev, 打开浏览器localhost:4200：
ok,开发环境大概的配置就完成了。
开启热更新，安装vue-router和vuex
热更新：修改webpack.config.js:
// 省略
const webpack = require('webpack');
devServer: {
port: 4200,
hot: true
},
// 省略
plugins: [
new HTMLPlugin({
template: './index.html'
}),
// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin()
]
// 省略
安装vue-router和vuex：
npm i vue-router vuex
修改src/main.js:
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.use(Vuex)
new Vue({
el: '#root',
render: h => h(App)
});
然后重新npm run dev即可。
下节：手动配置vue-cli下(待更新)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 苹果：今年晚些时候将推全新手动安装iOS 12配置描述文件流程
- webpack4.29.x成神之路（二十三） 手动配置vue-cli下
- webpack4.29.x成神之路（二十四） 手动配置vue-cli——集成typescript
- 手动升级Coreos版本
- mongodb操作的模块手动封装
- 越狱手记：手动编译安装 Electra
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Developing Large Web Applications
Kyle Loudon / Yahoo Press / 2010-3-15 / USD 34.99
As web applications grow, so do the challenges. These applications need to live up to demanding performance requirements, and be reliable around the clock every day of the year. And they need to withs......一起来看看 《Developing Large Web Applications》 这本书的介绍吧!
