新建一个空的文件夹,使用npm init
来初始化项目,并安装 vue 模块。
npm init -y // -y直接生成的黑默认的package.json
npm i vue --save-dev
根目录中添加以下文件夹:
- build: 存放打包工具的配置文件。
- examples:存放组件示例。
- packages:存放组件源码,也是之后源码分析的主要目标。
- src:存放入口文件以及各种辅助文件。
- test:存放单元测试文件
- public: 模板信息
根目录下创建项目配置文件: .gitignore
README.md
public 目录下,创建模板页文件: favicon.ico
index.html
examples 目录下,创建示例入口文件: App.vue
main.js
logo.png
项目使用 webpack 实现模块化管理和打包。
npm install webpack --save-dev
./node_modules/.bin/webpack -h // 检查安装是否成功
webpack-cli
最新为4.X
版本,webpack-dev-server
无法正常运行,安装时需要指定版本(确保两模块版本皆为3.X
)。
npm i webpack-cli@3.3.12 --save-dev
npm i webpack-dev-server@3.11.2--save-dev
webpack-cli
提供了许多命令来使 webpack 的工作变得简单。官方文档
webpack-dev-server
为你提供了一个简单的 web server,并且具有 live reloading(实时重新加载) 功能。官方文档
webpack 使用 loader 对文件进行预处理。可以构建包括 JavaScript 在内的任何静态资源。
官方插件列表
webpack 插件中文文档
npm install vue-loader vue-template-compiler --save-dev // vue组件处理
npm install url-loader file-loader html-loader --save-devl //文件处理
npm install style-loader css-loader --save-devl //样式处理
npm install html-webpack-plugin --save-dev //生成一个html文件
参考
vue-loader 详解: https://segmentfault.com/a/1190000020629508
html-webpack-plugin 详解:https://www.cnblogs.com/wonyun/p/6030090.html
在build
目录下创建 webpack 配置文件webpack.config.js
,提供入口(entry)
、模式(Mode)
、输出(output)
、模块(Module)
、插件(Plugins)
、开发服务器(DevServer)
等配置选项。官方文档
const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: process.env.NODE_ENV,
entry: "./examples/main.js",
output: {
path: path.resolve(process.cwd(), "dist"),
filename: "bundle.js",
},
devServer: {
contentBase: "./dist",
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
preserveWhitespace: false,
},
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
esModule: false, //“[object Module]”问题
},
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
title: "Development",
favicon: "./public/favicon.ico",
template: "public/index.html",
filename: "index.html",
inject: true,
}),
],
};
在 npm 脚本中新增 webpack 命令,执行的命令会自动去node_modules
寻找,不用加上目录。
修改package.json
配置
.
...
"scripts": {
"build:dist": "webpack --config build/webpack.config.js",
"dev": "webpack-dev-server --config build/webpack.config.js"
},
...
.
cross-env 是一款运行跨平台设置和使用环境变量的脚本,不同平台使用唯一指令,无需担心跨平台问题。
npm i cross-env --save-dev
修改package.json
配置
{
"scripts": {
"build:dist": "cross-env NODE_ENV=development webpack --config build/webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js"
},
}
命令行窗口中,在该项目根目录下输入npm run dev
即可进行本地开发调试。
成功运行后,项目第一个页面结果如下: