注意, 这仍是一个未完成版本。
AAIT Official Forum is a UGC based website and mobile hybrid APP for members of AAIT to exchange ideas and share inspirations.
By reading through this documentation you will:
- Get a copy of this project;
- Running the development version of the project on your machine;
- Get to know how the project works, and write your first line of code;
- Contribute to the project.
这一部分文档将会指引你搭建客户端的本地开发环境，并初步了解如何使用 Vuetify 框架进行前端开发.
AAIT Forum 项目，以下简称AF，在客户端使用基于Vue.js，且遵循谷歌material design 标准的 vuetify 框架.
In order to run this project in development environment, you'll need a virtual server, vue.js framework, and vuetify framework installed on your machine. But in this part, I will only guide you through client side enviroment building.
一个最快捷的部署前端开发环境的方式就是通过npm安装所需的包。
One way to quickly get all things prepared is to install them via npm. If you have npm installed on your machine, skip this section.
If you haven't installed npm yet, following the link below to download and install node.js with npm : https://www.npmjs.com/get-npm.
Follow the instruction you will easily get things done. But be advised, npm is not your only option. You can use other pakage management tools such as yarn. Vue.js and vuetify DO provide other ways of installation, you can easily find solutons online or at vuetify official website.
When you have npm installed on your machine, you need to install vue.js and vuetify. Launch your CLI (Command Line Interface, 命令行交互界面), and type:
> npm install @vue/cli -g
This command will download and install vue.js CLI. After that, install vuetify with another similar command
> npm install vuetify --save
当上述步骤完成后，你就可以准备创建一个新的应用了. 但要注意的是，这只是前端开发环境. 由于项目的服务器端采用了PHP语言，你必须在本地搭建一个用于PHP开发的环境和虚拟服务器，才能正常运行项目工程. 请参见section 1.3.
If you have any problmes, refer to this link for help: https://vuetifyjs.com/zh-Hans/getting-started/quick-start
Once you have done all the prepare work, you should create a new application. In you CLI, type:
> cd xxx #切换到你的项目路径
> vue create xxx #xxx为项目名称
# 选择几个选项，并等待创建结束
> vue add vuetify #添加vuetify到项目目录
Then, cd to your project folder, and excute
npm run serve
to run the developement server. Open your browser, type:
localhost:8080
to preview your application. You can also preview mobile version on your mobile phone browser. Make sure that your mobile device is connected to the same LAN, and launch browser, type the following address:
your.dev.machine.ip:8080 #e.g. 192.168.1.100:8080
AF stands on gaints' shoulders. In order to run this project in development enviroment, you will also need to install some packages. The following is a list on what dependencis you should install and the official website of them.
- Vue Router. 路由不用我介绍了吧。如果你不知道路由是什么，那...
You can get familiar with the application you have just created, do some modification for testing purpose, and try to make something new with the help of vuetify official guide.
当你熟悉了基本的操作流程和vuetify之后，你就可以参与开发了。在本地创建一个新项目后，在本Github仓库中下载.zip压缩包，解压后得到的文件复制到项目目录中即可。
- TBC -