Descargar webpack Vue vueRouter - webpack Vue vueRouter Descarga del código fuente

webpack Vue vueRouter

Otras categorias

1.0.0

Descargar

Sitio web oficial gótico

Prefacio

Hace algún tiempo, cuando me enteré del grupo de la familia Vue, esta vez me encontré con una empresa que me pidió que creara un sitio web oficial. Así que acepté este proyecto con una actitud de aprendizaje. Durante todo el proyecto, todavía encontré muchos obstáculos. El más frustrante fue cuando me estaba preparando para ponerlo en el servidor. El empaquetado a través de webpack siempre se empaqueta en la memoria y no se puede empaquetar en el disco. Al final, este problema se resolvió modificando el archivo de configuración del paquete web, pero todavía no entiendo por qué escribiré un blog para resumirlo cuando lo descubra más tarde. En este proyecto, utilicé muchos conocimientos nuevos y, en general, fue muy gratificante.

Demostración y demostración

Debido a que la otra empresa no tiene personal técnico, no utiliza el modo de historial de enrutamiento y utiliza el hash predeterminado.
Haga clic aquí para acceder a Goth directamente

Configuración de compilación

 # install dependencies
npm install

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

# build production
npm run build

pila de tecnología

vista
enrutador vue
paquete web
elemento-ui
menos
es6

Además, también presenté Vuex para la gestión estatal, pero debido a que el sitio web actual es puramente estático, no se utilizará si es dinámico en el futuro.

Directorio de proyectos

 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配置文件

Resumen del proyecto

Cuando estaba trabajando en el proyecto, revisé muchos conocimientos de front-end y escribí algunos blogs. Los amigos que lo necesiten pueden echarle un vistazo.