%20(2).svg)
项目简介
本项目聚焦于 Vue.js 框架学习，属于前端开发项目。涵盖 Vue 脚手架的使用、组件化开发、webpack 配置与优化等内容，帮助开发者全面掌握 Vue.js 相关知识和技能。
项目的主要特性和功能
- Vue 脚手架使用：支持 vue-cli2 和 vue-cli3 两种版本的脚手架，可在指定路径按需创建项目。
- 组件化开发：掌握组件基础使用、全局与局部组件写法；实现父子组件通信，包括 props 传递数据、子组件通过 $emit 向父组件传递数据；处理复杂父子组件通信场景，确保数据正确传递与更新。
- Webpack 配置与优化：使用 webpack-dev-server 开启本地服务，支持实时刷新；引入 babel-loader、css-loader、less-loader、url-loader 和 file-loader 等多种 loader，实现不同类型文件的编译和加载；将 webpack.config.js 文件分离为基础配置和不同环境的定制化配置，便于维护。
安装使用步骤
1. 安装 Vue 脚手架
npm install @vue/cli -g
若需同时支持 vue-cli2，执行以下命令：
npm install -g @vue/cli-init
2. 创建项目
vue-cli2 创建项目
vue init webpack my-project
vue-cli3 创建项目
vue add
3. 安装与配置 webpack-dev-server
npm install webpack-dev-server@2.9.3 --save-dev
在 webpack.config.js 中配置 devServer 参数：
javascript
module.exports = {
entry: "./src/main.js",
output: {...},
module: {...},
resolve: {...},
plugins: [...],
devServer:{
contentBase: "./dist",
inline: true,
port: 9988
}
}
在 package.json 中设置快捷启动命令：
json
{
"scripts": {
"dev": "webpack-dev-server --open"
}
}
4. 分离 webpack 配置文件
拆分文件
将 webpack.config.js 拆分为 base.config.js、dev.config.js 和 prod.config.js。
安装 webpack-merge
npm install webpack-merge@4.1.5 --save-dev
引入基础配置文件
在 dev.config.js 和 prod.config.js 中引入 base.config.js 并合并配置。
修改打包命令
在 package.json 中修改打包命令：
json
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config./build/prod.config.js",
"dev": "webpack-dev-server --open --config./build/dev.config.js"
}
}
同时修改 base.config.js 中 output 的 path 参数：
javascript
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "../dist"),
filename: "bundle.js"
}
}
5. 启动项目
运行以下命令启动开发服务器：
npm run dev
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】