webpack Vue vueRouter Télécharger - webpack Vue vueRouter Téléchargement du code source

webpack Vue vueRouter

Autres catégories

1.0.0

Télécharger

Site officiel des Goths

Préface

Il y a quelque temps, parce que j'ai découvert le bucket de la famille Vue, j'ai rencontré cette fois une entreprise qui m'a demandé de créer un site Web officiel. J'ai donc accepté ce projet avec une attitude d'apprentissage. Pendant tout le projet, j'ai encore rencontré de nombreux pièges, le plus frustrant était lorsque je me préparais à le mettre sur le serveur. L'empaquetage via Webpack est toujours empaqueté en mémoire et ne peut pas être empaqueté sur disque. Au final, ce problème a été résolu en modifiant le fichier de configuration du webpack, mais je ne comprends toujours pas pourquoi j'écrirai un blog pour le résumer quand je le saurai plus tard. Dans ce projet, j'ai utilisé beaucoup de nouvelles connaissances et, dans l'ensemble, cela a été très enrichissant.

Démo && Démo

Comme l'autre société ne dispose pas de personnel technique, elle n'utilise pas le mode historique de routage et utilise le hachage par défaut.
Cliquez ici pour accéder directement à Goth

Configuration de la construction

 # install dependencies
npm install

# server with hot reload at localhost:8080
npm run dev

# build production
npm run build

pile technologique

vue
vue-routeur
pack Web
élément-ui
moins
es6

De plus, j'ai également introduit Vuex pour la gestion de l'état, mais comme le site Web actuel est purement statique, il n'est pas utilisé s'il est dynamique à l'avenir.

Répertoire du projet

 Goth
|
├── dist                               
|  ├── article               		   # 干货页面的图片
|  ├── team                            # 团队页面的图片
├── src                                
|  ├── assets                          
|     ├── css                          
|		├── reset.css                  # 样式重置文件
|     ├── img                          
|       ├── code.png                   # 二维码图片
|		├── index.jpg                  # 主页图片
|		├── story.jpg                  # 故事页面图片
|		├── us.jpg                     # 我们页面图片
|		├── vip-five.jpg               # VIP VI背景图片
|		├── vip-one.jpg                # VIP I背景图片
|		├── vip-three.jpg              # VIP III背景图片
|		├── vip-two.jpg                # VIP II背景图片
|     ├── less                         
|		├── article-item.less          # 干货页面中每个干货详情的公共样式
|		├── product.less               # 产品页面中每个产品详情的公共样式
|  ├── components                            
|     ├── article                      # 干货页面的细分      
|        ├── vue-america.vue           # 如何顺利申请到美国名校
|        ├── vue-ap.vue                # 关于AP考试(美国大学先修课程)
|        └── vue-defer.vue             # 被defer和waitlisted的原因及区别
|        └── vue-enroll.vue            # 美国春季入学和秋季入学
|        └── vue-ielts.vue             # 托福考试的基本认识以及意义
|        └── vue-sat.vue               # 解读新SAT
|        └── vue-transfer.vue          # 论美国大学转学
|     ├── product			           # 产品页面细分
|        ├── vue-family-member.vue     # family-member产品
|        ├── vue-mature-love.vue       # mature-love产品
|        ├── vue-puppy-love.vue        # puppy-love产品
|        └── vue-pure-love.vue         # pure-love产品
|     ├── vue-article.vue              # 干货
|     ├── vue-content.vue              # 内容
|     ├── vue-footer.vue               # 尾部
|     ├── vue-header.vue               # 头部
|     └── vue-index.vue                # Goth
|     ├── vue-product.vue              # 产品
|     ├── vue-story.vue                # 故事
|     ├── vue-team.vue                 # 团队
|     ├── vue-us.vue                   # 我们
|  ├── element                              
|     └── index.js                     # 按需引入element-ui的控件
|  └── router
|     └── index.js                     # 路由(懒加载)
|  ├── app.vue
|  ├── index.js                        
├── .babelrc                           # 设置转码和规则
├── favicon.ico                        # 图标
├── index.html                         
├── package.json                       # 依赖  
├── README.md                        
└── webpack.config.js                  # webpack配置文件

Résumé du projet

Lorsque je travaillais sur le projet, j'ai examiné de nombreuses connaissances frontales et écrit quelques blogs. Les amis qui en ont besoin peuvent y jeter un œil.