Vue-Components-Library 使用教程
1. 项目的目录结构及介绍
Vue-Components-Library/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── Button.vue
│ │ ├── Card.vue
│ │ └── ...
│ ├── App.vue
│ ├── main.js
│ └── router.js
├── package.json
├── README.md
└── vue.config.js
- public/: 包含静态资源文件,如
index.html
和favicon.ico
。 - src/: 源代码目录,包含组件、资源、主应用文件等。
- assets/: 存放静态资源,如图片、样式文件等。
- components/: 存放组件文件,如
Button.vue
、Card.vue
等。 - App.vue: 主应用组件。
- main.js: 项目入口文件。
- router.js: 路由配置文件。
- package.json: 项目依赖和脚本配置文件。
- README.md: 项目说明文档。
- vue.config.js: Vue 项目配置文件。
2. 项目的启动文件介绍
main.js
main.js
是项目的入口文件,负责初始化 Vue 实例并挂载到 DOM 中。
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount('#app');
- import Vue from 'vue': 导入 Vue 库。
- import App from './App.vue': 导入主应用组件。
- import router from './router': 导入路由配置。
- new Vue({...}).$mount('#app'): 创建 Vue 实例并挂载到
#app
元素上。
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖、脚本和其他配置信息。
{
"name": "vue-components-library",
"version": "1.0.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
"devDependencies": {
"@vue/cli-service": "^4.5.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2"
}
}
- scripts: 定义了项目的运行脚本,如
serve
、build
和lint
。 - dependencies: 项目运行时的依赖包。
- devDependencies: 开发时的依赖包。
vue.config.js
vue.config.js
文件用于配置 Vue 项目的构建选项。
module.exports = {
publicPath: '/',
outputDir: 'dist',
assetsDir: 'assets',
lintOnSave: true,
devServer: {
port: 8080,
open: true
}
};
- publicPath: 部署应用时的基本 URL。
- outputDir: 构建输出目录。
- assetsDir: 静态资源目录。
- lintOnSave: 保存时是否进行代码检查。
- devServer: 开发服务器配置,如端口和自动打开浏览器。