Vue-WeUI 项目教程

Vue-WeUI 项目教程

vue-weui基于vue3封装实现的weui样式组件库项目地址:https://gitcode.com/gh_mirrors/vuew/vue-weui

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

vue-weui/
├── build/                # 构建脚本目录
├── config/               # 项目配置目录
├── src/                  # 源代码目录
│   ├── assets/           # 静态资源目录
│   ├── components/       # 组件目录
│   ├── router/           # 路由配置目录
│   ├── App.vue           # 主组件
│   └── main.js           # 入口文件
├── static/               # 静态文件目录
├── test/                 # 测试目录
├── .babelrc              # Babel 配置文件
├── .editorconfig         # 编辑器配置文件
├── .eslintrc.js          # ESLint 配置文件
├── .gitignore            # Git 忽略文件配置
├── index.html            # 入口 HTML 文件
├── package.json          # 项目依赖及配置
├── README.md             # 项目说明文档
└── yarn.lock             # Yarn 锁定文件

2. 项目的启动文件介绍

main.js

main.js 是项目的入口文件，主要负责以下工作：

• 引入 Vue 和 VueRouter
• 引入并注册全局组件
• 创建 Vue 实例并挂载到 DOM

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本命令和其他配置信息。

{
  "name": "vue-weui",
  "version": "1.0.0",
  "description": "A Vue.js project with WeUI",
  "author": "Your Name <your.email@example.com>",
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "weui": "^1.1.3"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

.babelrc

.babelrc 文件用于配置 Babel 转译器。

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"]
}

.eslintrc.js

.eslintrc.js 文件用于配置 ESLint 代码检查工具。

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  plugins: [
    'vue'
  ],
  rules: {
    'generator-star-spacing': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

以上是 vue-weui 项目的基本

vue-weui基于vue3封装实现的weui样式组件库项目地址:https://gitcode.com/gh_mirrors/vuew/vue-weui