laravue frontend

Das Frontend-Projekt der Mikro-Community LaraVue, Adresse: https://laravue.org (in Entwicklung)

Zeichnen Sie hauptsächlich einige Erkenntnisse über Technologie und Leben auf und teilen Sie sie

Vorwort

LaraVue ist eine Kombination der Namen zweier Frameworks, das erste Back-End-Framework „Laravel“ und das erste Front-End-Framework „Vue“, mit denen ich beim Programmieren in Berührung gekommen bin. Ursprünglich hatte ich geplant, den Domainnamen laravue.com im März dieses Jahres zu beantragen, aber ich stellte fest, dass sich drei Tage vor mir ein Freund aus dem Ausland dafür beworben hatte. Diese Mikro-Community ist ein Projekt, das Front- und Backend komplett trennt. Es handelt sich um eine verbesserte Version meiner vorherigen Community. Leider ist mein CSS zu schlecht, sonst wären diese Seiten schon längst fertig. Diese Community hat auch keine spezifische Positionierung. Es geht hauptsächlich darum, einige technische Gedanken zum Wohle meiner selbst und zukünftiger Generationen zu teilen.

Technologie-Stack

vue2 + vuex + vue-router + vue-resource + ES6 + element-ui + sass

Installieren

 > git clone

> npm i

> npm run dev

Projektlayout

 .
├── build                                       // webpack 配置文件
├── config                                      // 项目打包路径
├── src                                         // 源码目录
|   ├── api
|   |   └── index.js                            // 后端 API 接口配置
│   ├── assets                                  // 图片存放地
│   ├── components                              // 组件
│   │   ├── Comment.vue                         // 评论组件
│   │   ├── Editor.vue                          // 编辑器组件
│   │   ├── Footers.vue                         // 尾部组件
│   │   ├── Headers.vue                         // 头部组件
│   │   ├── HotTopics.vue                       // 侧边栏热门话题组件
│   │   └── Popup.vue                           // 弹出框组件
│   ├── router
│   │   └── router.js                           // 路由配置
│   ├── store                                   // vuex 的状态管理
│   │   ├── modules                             // store 模块
|   |   |   └── account.js                      // 用户信息
│   │   ├── index.js                            // 引用vuex，创建 store
│   │   └── mutation-types.js                   // 定义常量 muations 名
|   ├── views                                   // 视图
│   │   ├── account                             // 用户视图
|   |   |   ├── Editor.vue                      // 编辑用户信息
|   |   |   ├── Login.vue                       // 登录页面
|   |   |   ├── Register.vue                    // 注册页面
|   |   |   ├── UserArticles.vue                // 用户发表的文章
|   |   |   ├── UserInfo.vue                    // 用户视图公共组件
|   |   |   ├── UserLikeArticles.vue            // 用户点赞的话题
|   |   |   ├── UserLikeUsers.vue               // 用户关注其他用户
|   |   |   ├── UserReplies.vue                 // 用户回复
|   |   |   └── VerifyEmail.vue                 // 注册激活
│   │   ├── article                             // 文章视图
|   |   |   ├── Create.vue                      // 编辑用户信息
|   |   |   ├── Editor.vue                      // 登录页面
|   |   |   ├── Index.vue                       // 注册页面
|   |   |   └──show.vue                         // 用户发表的文章
│   │   ├── error                               
|   |   |   └──404.vue                          // 404 错误
│   │   ├── other                               
|   |   |   ├──About.vue                        // 个人信息页面
|   |   |   └──Payment.vue                      // 打赏页面
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件，加载各种公共组件
├── static                                      // 静态文件
|   ├── css                                     // css 文件
|   |   └── markdown.css                         
├── index.html                                  // 入口 html 文件
.

Kontaktieren Sie mich

• Wenn Sie Fragen oder Probleme haben, können Sie mich gerne [email protected] kontaktieren