Unduh webpack Vue vueRouter - webpack Vue vueRouter Sumber Code Unduh

webpack Vue vueRouter

Kategori lainnya

1.0.0

Unduh

Situs web resmi Goth

Kata pengantar

Beberapa waktu yang lalu, saya belajar barel keluarga Vue, dan kebetulan bertemu sebuah perusahaan kali ini untuk membiarkan saya membangun situs web resmi. Jadi saya menerima proyek dengan sikap belajar. Pengemasan melalui webpack selalu dikemas ke dalam memori, dan tidak dapat dikemas ke dalam disk. Akhirnya, saya memecahkan masalah ini dengan memodifikasi file konfigurasi webpack, tetapi saya masih mengerti mengapa itu tidak terlalu dipahami. Dalam proyek ini, saya telah menggunakan banyak pengetahuan baru, dan secara umum, masih penuh.

Demo && demonstrasi

Karena perusahaan lain tidak memiliki personel teknis, ia tidak menggunakan mode sejarah rute, dan mengadopsi hash default
Klik di sini untuk mengakses Goth secara langsung

Bangun Pengaturan

 # install dependencies
npm install

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

# build production
npm run build

Tumpukan Teknologi

vue
vue-router
Webpack
Elemen-ui
lebih sedikit
ES6

Selain itu, saya juga memperkenalkan manajemen status VUEX, tetapi karena situs web saat ini murni dan statis, tidak digunakan.

Direktori Proyek

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