一、初始化项目
1.1、新建 package.json
npm init
1.2、安装依赖
npm 安装 vue、vue-router、vue-loader、webpack、webpack-cli，这些只是开发环境所需要的依赖，使用 --save-dev 安装到开发环境（见 package.json devDependencies）下：
npm install vue vue-router vue-loader webpack webpack-cli --save-dev
webpack 4.x 已经把 cli 单独拎出来了，所以还要安装 webpack-cli。webpack 本身其实直接能处理的只有 js 资源，是通过各种 loader 让其他资源可以被 webpack 打包处理。
用 vue 写单文件组件（.vue 文件），安装 vue-loader。
1.3、创建项目目录、文件
│ index.html
│ package.json
│ README.md
│
└─src
│ App.vue
│ main.js
│
├─assets
│ └─images
│ pic.png
│
├─components
├─router
│ index.js
│
├─utils
└─views
About.vue
Home.vue
src/App.vue
<template>
<div id="app">
{{message}}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "Hello!"
}
}
}
</script>
src/main.js
import Vue from 'vue'
import App from "./App.vue"
// 创建 Vue 实例
new Vue({
router,
render: h => h(App)
}).$mount("#app")
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>custom-project-vue</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
二、webpack 基本配置
2.1、添加配置文件
根目录下新建 webpack.config.js，配置 webpack：
const path = require('path') // 系统路径模块
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入模板渲染插件
const VueLoaderPlugin = require('vue-loader/lib/plugin') // 将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 项目总入口 js 文件
// 输出文件
output: {
path: path.join(__dirname, 'dist'), // 所有的文件都输出到 dist 目录下
filename: 'bundle-[hash].js' // 输出文件的名称加上 hash 值
},
module: {
rules: [{
// 使用 vue-loader 解析 .vue 文件
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
// 要加上 style-loader 才能正确解析 .vue 文件里的 <style> 标签内容
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', // 生成的文件名称
template: 'index.html', // 指定用 index.html 做模版
inject: 'body' // 指定插入的 <script> 标签在 body 底部
}),
new VueLoaderPlugin()
]
}
添加了一些引用 style-loader、css-loader，需要安装：
npm install html-webpack-plugin style-loader css-loader vue-template-compiler --save-dev
安装并引入 html-webpack-plugin 的目的是在打包项目的时候，在 dist 文件夹下也会生成 index.html 文件，也会添加上对出口文件的引用。
2.2、开启本地服务
webpack-dev-server 可以在本地启动一个服务器，而且当有任何文件修改的时候会自动重新打包，并且刷新浏览器页面。
安装 webpack-dev-server，配置本地开发环境：
npm install webpack-dev-server cross-env --save-dev
用上 cross-env 是因为要修改 package.json 里的 scripts，而不同的平台写 scripts 的方式不一样。
修改 package.json 里的 scripts：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --open --config webpack.config.js"
},
执行 npm run dev，项目成功启动后会自动打开浏览器。
2.3、添加构建脚本
在 package.json 文件的 scripts 属性里添加 build 脚本:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --open --config webpack.config.js",
"build": "webpack --config webpack.config.js"
},
2.4、打包项目测试
完成以上配置后运行 npm run build 来构建项目，可以看到在当前目录下生成了一个 dist 目录，目录下有一个 bundle.js 和 index.html 文件，这就是打包好的项目。
2.5、添加图片、CSS 预处理器等 loader
图片 loader 用的是 url-loader，它依赖于 file-loader，比 file-loader 多了一个可以把小于一定大小的图片直接转化成 base64 的形式插入到 html 页面，可以减少网络请求。
安装依赖：
npm install file-loader url-loader node-sass sass-loader --save-dev
修改 webpack.config.js，在 module rules 下添加：
// ...
{
test: /\.scss$/,
use: [
// 处理顺序是从 sass-loader 到 style-loader
'style-loader',
'css-loader',
'sass-loader'
]
}, {
test: /\.(gif|jpg|jpeg|png|svg)$/i,
use: [{
loader: 'url-loader',
options: {
// 当文件大小小于 limit byte 时会把图片转换为 base64 编码的 dataurl，否则返回普通的图片
limit: 5120000, // 500k 以下转为 base64
name: 'dist/assest/images/[name]-[hash:5].[ext]' // 图片文件名称加上内容哈希
}
}]
}
// ...
2.6、添加 postcss-loader + autoprefixer，自动添加 css 浏览器前缀
npm install postcss-loader autoprefixer --save-dev
新增 postcss 配置文件 postcss.config.js：
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [
autoprefixer({
browsers: ['last 5 versions']
})
]
}
webpack.config.js：
{
test: /\.css$/,
// 要加上 style-loader 才能正确解析 .vue 文件里的 <style> 标签内容
use: ['style-loader', {
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
},
{
test: /\.scss$/,
use: [
// 处理顺序是从 sass-loader 到 style-loader
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'sass-loader'
]
},
2.7、添加 babel-loader，转译 es6 代码为 es5 代码
项目根目录创建 .babelrc 文件：
{
"presets": [
"env"
]
}
安装依赖：
npm install babel-loader@7 babel-core babel-preset-env --save-dev
修改 webpack.config.js，module.rules 再加一条：
{
// 转译 es6 代码为 es5 代码
test: /\.js$/,
exclude: /(node_modules|bower_components)/, // 不处理这两个文件夹里的内容
loader: 'babel-loader'
}
2.8、清除旧的 bundle.js
每次修改文件，npm run build 之后，都会生成一个新的 bundle-[hash].js 文件，添加 clean-webpack-plugin，每次 build 之前可以自动先清除输出文件夹。
安装 clean-webpack-plugin：
npm install clean-webpack-plugin --save-d
修改 webpack.config.js，引入 clean-webpack-plugin 并在 plugins 数组添加一项：
const {
CleanWebpackPlugin
} = require("clean-webpack-plugin") // 清除输出文件夹
plugins: [
new CleanWebpackPlugin()
]
2.9、添加可以自动解析的扩展
import 的时候可以不用写后缀也能正确引用文件，例如：
import App from './App'
打开 webpack.config.js，添加 resolve：
resolve: {
extensions: ['.js', '.json', '.vue']
},
三、路由配置
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = new VueRouter({
routes
})
export default router
在 main.js 中引入路由配置文件：
import router from './router'
在 App.vue 中添加 router-link：
<template>
<div id="app">
<router-view></router-view>
<router-link to="/">首页</router-link>
<router-link to="/about">关于
</router-link>
</div>
</template>
项目结构：
│ .babelrc
│ .gitignore
│ index.html
│ LICENSE
│ package-lock.json
│ package.json
│ postcss.config.js
│ README.md
│ webpack.config.js
│
├─dist
│ bundle-40277308b55fa87c0dd3.js
│ index.html
│
└─src
│ App.vue
│ main.js
│
├─assets
│ └─images
│ pic.png
│
├─components
├─router
│ index.js
│
├─utils
└─views
About.vue
Home.vue
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
