webpack 搭建vue脚手架
- 初始化项目
npm init -y
- 安装webpack 和webpack-cli
npm i webpack webpack-cli --save-dev
- 解析 .vue 的文件(单文件组件),安装 vue, vue-loader, vue-template-compiler 三个插件
npm i vue vue-loader vue-template-compiler --save-dev
- 项目根目录下创建src文件夹,
- 在里边创建一个main.js文件
- 创建一个App.vue 文件(模板)
main.js的内容:
import Vue from 'vue'
import App from './App.vue'
new Vue({
render:h => h(App)
}).$mount('#app')
- 创建html模板文件
- 在项目的根目录下创建一个public文件夹,里边创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- div#app 最终会被 App.vue 文件替换, -->
<div id="app"></div>
</body>
</html>
- 解析生成html 模板: html-webpack-plugin插件
npm i html-webpack-plugin --save-dev
- 项目根目录下创建webpack.config.js文件
const path = require('path')
// 引入vue-loader的内置插件
const {VueLoaderPlugin} = require('vue-loader')
// 引入 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 配置入口文件
entry:'./src/main.js',
// 配置文件的出口
output:{
path:path.resolve(__dirnamem, 'dist'),
filename:'main.js'
},
// 配置loader
module:{
rules:[
{
test:/\.vue$/i,
use:['vue-loader']
}
]
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:'./public/index.html',
filename:'index.html'
})
]
}
- 解析css
- 安装css-loader 和style-loader
npm i css-loader style-loader --save-dev
- 配置loader
module:{
rules:[
{
test:/\.vue$/i,
use:['vue-loader']
},
{
test:/\.css$/i,
use:['stylel-loader', 'css-loader']
}
]
},
- 处理图片
- 需要安装file-loader url-loader
npm i file-loader url-loader --save-dev
- 配置loader
module:{
rules:[
{
test:/\.vue$/i,
use:['vue-loader']
},
{
test:/\.css$/i,
use:['stylel-loader', 'css-loader']
},
{
test:/\.(jpg|jpeg|webp|gif|png)$/i,
use:[
{
loader:'url-loader',
option:{
limit:8192,
}
}
]
}
]
}
在vue中 图片需要作为资源引入
<template>
<div>
<img :src="logo" alt="">
</div>
</template>
<script>
import log from '图片路径'
export default({
data(){
return {
logo
}
}
})
</script>
- 处理sass
- 安装sass sass-loader node-sass
npm i sass sass-loader node-sass --save-dev
- 配置loader
module:{
rules:[
{
test:/\.vue$/i,
use:['vue-loader']
},
{
test:/\.css$/i,
use:['stylel-loader', 'css-loader']
},
{
test:/\.(jpg|jpeg|webp|gif|png)$/i,
use:[
{
loader:'url-loader',
option:{
limit:8192,
}
}
]
},
{
test:/\.s(a|c)ss$/i,
use:[
'style-loader', // 将 JS 字符串生成为 style 节点
'css-loader',// 将 CSS 转化成 CommonJS 模块
'sass-loader'] // 将 Sass 编译成 CSS
}
]
}
- 提取css生成独立独立的css文件
- 安装 mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
- 引入插件
// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
- 配置loader 和 插件
module:{
rules:[
{
test:/\.vue$/i,
use:['vue-loader']
},
{
test:/\.css$/i,
// 使用插件内置的loader
use:[MiniCssExtractPlugin.loader, 'css-loader']
},
{
test:/\.s(a|c)ss$/i,
use:[
MiniCssExtractPlugin.loader, // 将 JS 字符串生成为 提取为单独的css文件
'css-loader',// 将 CSS 转化成 CommonJS 模块
'sass-loader'] // 将 Sass 编译成 CSS
}
]
},
plugins:[
new MiniCssExtractPlugin()
]
vue的全家桶配置
需要使用路由
- 安装 vue-router
在src文件下创建一个 router 文件夹,里边创建一个index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component:'路由组件'
},
{
path:'/',
component:() => import('路由组件')
},
....
]
const router = new VueRotuer({
routes
})
export default router
- 在main.js中引入router
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
new Vue({
router,
render:h => h(App)
}).$mount('#app')
需要vuex
- 安装 vuex
在src文件下创建一个 store 文件夹,里边创建一个index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
},
mutations:{
},
actions:{
}
,getters:{
}
,modules:{
}
})
export defalut store
- 在main.js中引入veux
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store/index.js'
new Vue({
router,
store,
render:h => h(App)
}).$m