Vue-SUI-Demo使用指南

Vue-SUI-Demo使用指南

vue-sui-demo用vue 和 SUI-Mobile 写了一个移动端demo，用来反馈学习vue的成果（禁用了SUI自带的路由，使用vue-router, vue-resource, webpack）[a web app written by vue & sui-mobile]项目地址:https://gitcode.com/gh_mirrors/vu/vue-sui-demo

项目概述

Vue-SUI-Demo是由开发者eteplus创建的一个示例项目，旨在展示如何使用Vue.js结合SUI-Mobile框架开发移动端应用。该项目特别之处在于它禁用了SUI-Mobile自带的路由功能，转而使用Vue Router和Vue Resource，并采用Webpack进行打包管理。此外，该示例利用ES6语法并通过Babel进行转换，提供了一套完整的从开发到部署的工作流程。

1. 项目目录结构及介绍

以下是Vue-SUI-Demo的基本目录结构及其简要说明：

├── README.md             - 项目说明文档
├── dist                  - 项目构建后的输出目录
├── config                - 包含环境变量和入口出口配置的目录
│   ├── index.js          - 主配置文件
├── static                - 存放静态资源的目录
├── src                   - 源代码目录
│   ├── components        - 组件存放区
│   ├── views              - 视图文件夹
│   ├── App.vue            - 应用的主组件
│   └── main.js            - 入口文件，启动应用程序
├── build                 - 构建相关的脚本和配置目录
│   ├── dev-server.js     - 开发服务器配置脚本
│   └── webpack.base.conf.js等 - Webpack配置文件
├── package.json         - 项目配置文件，包含scripts命令、依赖等

2. 项目启动文件介绍

• main.js 是项目的入口文件，它负责初始化Vue实例，并引入核心组件和路由配置。在开发环境中，它也连接到了Vue Router和可能的其他全局插件或设置。

3. 项目的配置文件介绍

• config/index.js：这个文件是项目构建配置的核心，包含了开发和生产环境下的各种配置项，如端口号、公共路径、以及编译输出的目标目录等。
• build目录中的文件，特别是webpack.base.conf.js和其他以.conf.js结尾的文件，用于定义Webpack的编译规则，包括加载器、插件设置等，这对于理解项目如何被编译和优化至关重要。
• package.json：除了列出项目的依赖和开发依赖之外，还定义了一系列npm scripts，比如dev用于启动开发服务器，build用于生产环境构建，这些都是管理项目生命周期的重要部分。

快速开始步骤

1. 克隆项目: git clone https://github.com/eteplus/vue-sui-demo.git
2. 安装依赖: 使用NPM或CNPM。推荐CNPM以加快安装速度：npm install -g cnpm --registry=https://registry.npm.taobao.org，然后在项目根目录运行cnpm install。
3. 启动项目: 运行npm run dev，浏览器将自动打开项目预览。

请注意，由于仓库已被归档，实际操作时可能需要考虑使用当时可用的依赖版本或者寻找更新的替代方案。

vue-sui-demo用vue 和 SUI-Mobile 写了一个移动端demo，用来反馈学习vue的成果（禁用了SUI自带的路由，使用vue-router, vue-resource, webpack）[a web app written by vue & sui-mobile]项目地址:https://gitcode.com/gh_mirrors/vu/vue-sui-demo