创建VUE项目
1. 新建项目
本流程不使用vue-cli，所以第一步是创建一个空文件夹，然后在命令行该文件路径下执行命令：npm init
然后根据命令行的提示，设置，或者全部按回车用默认内容。
2. 安装基本的 npm 包
安装webpack 4.x版本需要同时安装webpack-cli，vue-loader是为了让webpack可以打包.vue文件。
npm install vue vue-loader webpack webpack-cli -D
3. 添加项目各种入口文件
在根目录新建dist文件夹（这是webpack打包生成文件的位置）
在根目录创建src文件夹，并在里面添加main.j和app.vue文件（这是以后前端文件存放的目录）
dist/
src/
main.js
app.vue
index.html/
app.vue文件代码
<template>
<h2 class="color-red">{{ text }}</h2>
</template>
<script>
export default {
name: "App",
data() {
return {
text: "Hello, Vue!"
};
}
};
</script>
<style scoped>
.color-red {
color: red;
}
</style>
main.js代码
import Vue from 'vue'; // 从node_modules引入vue类库
import App from './app.vue'; // ES6 语法，相当于 import { default as App } from './app.vue'。因为app.vue用过的是export default {...}，所以可以这样写
new Vue({
el: '#app',
components: {
App
},
/**
* Vue2.x 区分了完整版和运行时版，然后当使用 webpack 的时候默认是只包含运行时的 ES Module 版本。
* 运行时版不包括编译器【用来将模板字符串编译成为 JavaScript 渲染函数的代码】，所以不能用 template，要用 render 函数
* 参考：https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A
*/
render: (createElement) => createElement(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>A demo project build with vue and webpack</title>
</head>
<body>
<h1>一个用vue + webpack 搭建的项目框架</h1>
<div id="app"></div>
<script src="/dist/bundle.js"></script>
</body>
</html>
4. 添加 webpack 配置文件
在项目根目录下添加webpack.config.js文件。内容如下：
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: path.join(__dirname, 'src/main.js'), // 项目总入口js文件
// 输出文件
output: {
path: path.join(__dirname, 'dist'), // 所有的文件都输出到dist/目录下
filename: 'bundle.js'
},
module: {
rules: [{
// 使用vue-loader解析.vue文件
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
// 要加上style-loader才能正确解析.vue文件里的<style>标签内容
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new VueLoaderPlugin() // 最新版的vue-loader需要配置插件
]
};
5. 添加构建脚本
在 package.json 文件的 scripts 属性里添加 build 脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
因为我们添加了一些引用，比如 style-loader、css-loader 等，所以也要安装相应的包。
npm i style-loader css-loader vue-template-compiler -D
安装好依赖后运行 npm run build 来构建项目。
直接用浏览器打开根目录下的index.html文件就可以看到页面展示的内容了。
如果有问题，检查步骤是否有错，浏览器是否报错。
6. 添加图片、CSS 预处理器等 loader
图片 loader 用的是 url-loader，它依赖于 file-loader，比 file-loader 多了一个可以比小于一定大小的图片直接转化成 base64 的形式插入到 html 页面，可以减少网络请求。
CSS 预处理器 我选的是 LESS。
安装依赖：
npm i file-loader url-loader node-less less-loader -D
修改 webpack.config.js
module.exports =
{
test: /\.css$/,
// 要加上style-loader才能正确解析.vue文件里的<style>标签内容
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [
// 处理顺序是从less-loader到style-loader
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/i,
use: [{
loader: 'url-loader',
options: {
// 当文件大小小于limit byte时会把图片转换为base64编码的dataurl，否则返回普通的图片
limit: 8192,
name: 'dist/assest/images/[name]-[hash:5].[ext]' // 图片文件名称加上内容哈希
}
}]
}
]
},