准备工作
- 新建文件夹
- npm init
- 创建文件夹和文件
- [app](#app)
- [css](#css)
- [reset.css](#resetcss)
- [js](#js)
- [home](#home)
- [router](#router)
- [app.vue](#appvue)
- [main.js](#mainjs)
- [view](#view)
- [index.html](#indexhtml)
- [package.json](#packagejson)
配置webpack.config.js
const path = require('path')
module.exports = {
entry: {
app: './app/js/main.js'
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(jpg|jpeg|png|svg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 1024,
filename: '[name].[ext]'
}
}
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [],
output: {
filename: '[name].min.js',
path: path.join(__dirname, 'dist')
}
}
安装loader:
npm i -D webpack vue-loader html-loader style-loader css-loader url-loader file-loader sass-loader
安装devserver
config.js添加代码
devServer: {
contentBase: path.join(__dirname, "dist"),
// 如果需要提供静态文件在dist输出
compress: true,
// 服务开启压缩
port: 9000
// 服务占用端口
},
安装:npm i webpack-dev-server
增加命令行脚本:
"build": "webpack --mode=production --config webpack.config.js",
"dev": "webpack-dev-server --mode=production --config webpack.config.js"
这时候run dev会提示错误如下:
Cannot find module 'webpack-cli/bin/config-yargs'
所以: npm i webpack-cli
.
这时候你会发现服务可以启动了,但是页面显示:Cannot GET /。
这是什么原因呢?
配置router:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../home/index.vue'
Vue.use(Router)
export default new Router({
routers: [
{
prth: '/',
name: 'home',
component: Home
}
]
})
配置入口文件
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = false
new Vue({
el:'#app',
router,
components: {
App
},
template: '<App/>'
})
写入App.vue 的内容,很简单:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
这里有一个很重要的内容。index.html模板:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
npm run dev 报错:
Cannot find module ‘vue-template-compiler’
解决办法:
npm i vue-template-compiler
继续报错:
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
解决办法:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugin配置:
plugins: [
new VueLoaderPlugin()
],
仍然报错:
Can’t resolve ‘vue’
Can’t resolve ‘vue-router’
npm i vue vue-loader
Can’t resolve ‘vue-router’
npm i vue-router
这时候服务器url可以打开,但是控制台报错如下:
Failed to load resource: the server responded with a status of 404 (Not Found)
解决办法如下:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: './app/views/index.html'
})
],
px转rem
css下面:
{
loader: 'px2rem-loader',
// options here
options: {
remUni: 75,
remPrecision: 8
}
}
scss下面添加配置:
{
loader: 'px2rem-loader',
// options here
options: {
remUni: 75,
remPrecision: 8
}
}
Css module的使用:
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:8]'
}
}
css Module 和scss的配合使用:
{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:8]'
}
}, {
loader: 'px2rem-loader',
// options here
options: {
remUni: 75,
remPrecision: 8
}
}