WP-Vue 项目教程
1. 项目的目录结构及介绍
WP-Vue 项目的目录结构如下:
wp-vue/
├── assets/
│ ├── css/
│ ├── img/
│ └── js/
├── components/
│ ├── App.vue
│ └── ...
├── config/
│ └── ...
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── main.js
│ └── ...
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js
目录介绍:
- assets/: 存放静态资源文件,如 CSS、图片和 JavaScript 文件。
- components/: 存放 Vue 组件文件。
- config/: 存放项目的配置文件。
- node_modules/: 存放项目依赖的 Node.js 模块。
- public/: 存放公共资源文件,如
index.html
。 - src/: 存放源代码文件,如
main.js
。 - .gitignore: Git 忽略文件配置。
- package.json: 项目依赖和脚本配置文件。
- README.md: 项目说明文档。
- webpack.config.js: Webpack 配置文件。
2. 项目的启动文件介绍
WP-Vue 项目的启动文件是 src/main.js
。该文件主要负责初始化 Vue 实例并挂载到 DOM 中。
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App),
}).$mount('#app');
启动文件介绍:
- import Vue from 'vue': 引入 Vue 库。
- import App from './App.vue': 引入根组件
App.vue
。 - new Vue({...}): 创建一个新的 Vue 实例。
- render: h => h(App): 使用
render
函数渲染根组件App.vue
。 - .$mount('#app'): 将 Vue 实例挂载到 DOM 元素
#app
上。
3. 项目的配置文件介绍
WP-Vue 项目的配置文件主要包括 package.json
和 webpack.config.js
。
package.json
配置文件介绍:
{
"name": "wp-vue",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack --mode production"
},
"dependencies": {
"vue": "^2.6.12"
},
"devDependencies": {
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
配置文件介绍:
- name: 项目名称。
- version: 项目版本。
- scripts: 定义项目的脚本命令,如
start
和build
。 - dependencies: 项目运行时的依赖。
- devDependencies: 项目开发时的依赖。
webpack.config.js
配置文件介绍:
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
};
配置文件介绍:
- entry: 指定入口文件。
- output: 指定输出