Vue Autosuggest 项目教程
vue-autosuggest🔍 Vue autosuggest component.项目地址:https://gitcode.com/gh_mirrors/vu/vue-autosuggest
1. 项目的目录结构及介绍
Vue Autosuggest 项目的目录结构如下:
vue-autosuggest/
├── dist/
│ ├── vue-autosuggest.css
│ └── vue-autosuggest.js
├── examples/
│ ├── App.vue
│ ├── main.js
│ └── ...
├── src/
│ ├── components/
│ │ ├── VueAutosuggest.vue
│ │ └── ...
│ ├── utils/
│ │ └── ...
│ ├── index.js
│ └── ...
├── tests/
│ └── ...
├── package.json
├── README.md
└── ...
目录结构介绍
- dist/: 包含构建后的文件,如
vue-autosuggest.css
和vue-autosuggest.js
。 - examples/: 包含示例应用的文件,如
App.vue
和main.js
。 - src/: 包含源代码文件,如
VueAutosuggest.vue
组件和其他辅助文件。 - tests/: 包含测试文件。
- package.json: 项目的配置文件,包含依赖和脚本。
- README.md: 项目的说明文档。
2. 项目的启动文件介绍
项目的启动文件位于 examples/main.js
,内容如下:
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({ render: h => h(App) }): 创建 Vue 实例并渲染
App.vue
组件。 - .$mount('#app'): 将 Vue 实例挂载到 DOM 元素
#app
上。
3. 项目的配置文件介绍
项目的配置文件是 package.json
,内容如下:
{
"name": "vue-autosuggest",
"version": "1.10.1",
"description": "WAI-ARIA complete Autosuggest component built with the power of Vue.",
"main": "dist/vue-autosuggest.js",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-eslint": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.0.1",
"jest": "^24.9.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
配置文件介绍
- name: 项目名称。
- version: 项目版本。
- description: 项目描述。
- main: 入口文件。
- scripts: 包含可执行的脚本命令,如
serve
,build
,lint
,test
。 - dependencies: 生产环境依赖,如
vue
。 - devDependencies: 开发环境依赖,如
@vue/cli-plugin-babel
,eslint
等
vue-autosuggest🔍 Vue autosuggest component.项目地址:https://gitcode.com/gh_mirrors/vu/vue-autosuggest