webpack Vue vueRouter
1.0.0
Some time ago, I learned the Vue family barrel, and happened to meet a company this time to let me build an official website. So I accepted the project with a learning attitude. In the entire project, I still encountered a lot of pit. The most toss was when I was ready to put it on the server. Packing through Webpack is always packaged into the memory, and it cannot be packaged into the disk. Finally, I solved this problem by modifying the configuration file of the Webpack, but I still understand why it is not particularly understood. After that, I will write a blog to summarize it. In this project, I have used a lot of new knowledge, and in general, it is still full.
Because the other company has no technical personnel, he does not use the History mode of the route, and adopts the default Hash
Click here to access GOTH directly
# install dependencies
npm install
# server with hot reload at localhost:8080
npm run dev
# build production
npm run build
vue
vue-router
webpack
Element-UI
less
ES6
In addition, I also introduced the status management Vuex, but because the current website is pure and static, it is not used. In the later stage, if it is dynamic, it should be used.
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配置文件
I reviewed a lot of front -end knowledge when I was doing the project. I wrote a few blogs. You can take a look at the partners who need it.
Use Border to achieve page folding
Summary of uncommon style
Summary of uncommon styles 2
Use JavaScript to retrieve the page directly
Linear-Gradient attribute implementation page folding
Vue-Router's things
Use CSS3 to achieve a response waterfall flow
