创建目录
初始化
npm init → 创建package.json
创建业务目录
app -> js -> main,APP.vue
app -> css -> reset.scss
app -> views -> index.html
注意:本系列博客使用的版本是
webpack3.10.0,
“vue”: “^2.5.16”,
“vue-router”: “^3.0.1”,
“webpack-dev-server”: “^2.9.5”
再补上一个目录结构
创建配置文件
webpack.config.js
文件配置
基础配置 : entry(入口)—— module(模块)——plugins(插件)—— output(输出)
进阶配置: resolve(解析器)——devtool(开发工具)——devServer(开发服务器)
在webpack.config.js输入以下代码,设置基础模块、以及输入输出打包功能
// 当成模块输出
module.exports = {
// 入口
entry: {
app: './app/js/main.js'
},
// 开发服务器
devServer: {
// 静态文件打包出口
contentBase: path.join(__dirname, "dist"),
// 启用gzip 压缩
compress: true,
// 端口
port: 9000
},
// 模块
module: {
loaders: [{
test: /\.html$/,
loader: 'html-loader'
}, {
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}]
},
// 插件
plugins: [],
// 输出
output: {
// 打包后的输出的文件名
filename: '[name].min.js',
// 打包后的文件存放的地方
path: path.resolve(__dirname, 'dist')
}
}`
## 进阶配置-网络配置devServer
根据需要设置
设置配置时,如有疑问, 官方文档查询最为快捷
devServer: {
contentBase: path.join(__dirname, "dist"), // 静态文件输出地址
compress: true, // 一切服务都启用gzip 压缩
port: 9000 // 端口号
}
// 把上面的代码加入以下代码后面
module.exports = {
entry: {
app: './app/js/main.js'
},
这之后,执行命令 npm install webpack-dev-server --save-dev
安装本地网络服务
webpack-dev-server 为你提供了一个服务器和实时重载(live reloading) 功能。
然后使用Npm继续安装module下,loaders里面的Loader。
npm install html-loader vue-loader style-loader css-loader sass-loader -D
VUE是组件化的框架,所以首先要到组件的文件夹,创建用于显示的组件。
在home文件夹的index.vue中输入代码
home
然后为了显示组件,我们需要设置路由,把组件绑定到主页。
来到router目录,找到index.js文件,输入以下代码
import Vue from "vue";
import Router from "vue-router";
import Home from "../home/index.vue";
Vue.use(Router);
export default new Router({
routes:[{
path:'/',
name:'home',
component:Home
}]
})
此时组件已经绑定到了主页,但我们还没有编写vue的真正主页,App.vue的代码
所以我们需要到App.vue编写代码
// 路由中绑定的页面
那么这个时候我们是不是就可以启动页面了呢?
答案是否定的。
由于是手动创建配置文件,其实目前为止,我们并没有在项目文件夹里面安装vue和vue-router,webpack也没有安装。
所以我们还需要执行npm install vue vue-router
和 npm install webpack -D
然后
再配置一下入口的mian.js
import Vue from "vue"
import App from "./App.vue"
import router from "./router"
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: "#app",
router,
components: { App },
template: "",
})
/* eslint-enable no-new */
因为我们刚才安装了本地网络服务,所以可以输入根据官方文档提供的使用信息,打开命令行
执行 webpack-dev-server --open
这时候就可以进去了。
但……还是会报错!
(继续改bug,请阅读下一章)