【亲测免费】 Vue-At 项目教程

2026-01-19 11:31:23作者：伍霜盼Ellen

1. 项目的目录结构及介绍

Vue-At 项目的目录结构如下：

vue-at/
├── dist/
│   ├── vue-at-textarea.js
│   └── vue-at.js
├── examples/
│   ├── App.vue
│   ├── main.js
│   └── ...
├── src/
│   ├── components/
│   │   ├── At.vue
│   │   └── AtTa.vue
│   ├── index.js
│   └── ...
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── ...

目录介绍

dist/: 包含编译后的文件，如 vue-at.js 和 vue-at-textarea.js。
examples/: 包含示例应用的文件，如 App.vue 和 main.js。
src/: 包含源代码文件，如 components/ 目录下的组件文件和 index.js 入口文件。
.gitignore: Git 忽略文件配置。
LICENSE: 项目许可证文件。
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')

启动文件介绍

引入 Vue 和 App.vue 组件。
创建 Vue 实例并挂载到 #app 元素上。

3. 项目的配置文件介绍

项目的配置文件主要是 package.json，内容如下：

{
  "name": "vue-at",
  "version": "2.0.0",
  "description": "At.js for Vue",
  "main": "dist/vue-at.js",
  "scripts": {
    "build": "npm run build:umd && npm run build:umd-min",
    "build:umd": "rollup -c build/rollup.config.js",
    "build:umd-min": "rollup -c build/rollup.config.min.js",
    "dev": "rollup -c build/rollup.config.js -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/fritx/vue-at.git"
  },
  "keywords": [
    "vue",
    "at",
    "atwho"
  ],
  "author": "fritx",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/fritx/vue-at/issues"
  },
  "homepage": "https://github.com/fritx/vue-at#readme",
  "dependencies": {
    "textarea-caret": "^3.1.0"
  },
  "devDependencies": {
    "rollup": "^1.27.8",
    "rollup-plugin-buble": "^0.19.8",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-uglify": "^6.0.3",
    "vue": "^2.6.10"
  }
}