Introduction to Common Components and Framework Structure in Vue Projects

Vue project basic structure

A Vue project, I think the smallest subset is actually {vue,vue-router, component}, Vue as the basic library, provides us with features such as two-way binding. Vue-router connects different "pages", component as style or behavior output, you can implement the most basic static SPA website through these three things. Of course, I won't talk about the broad concept of Vue全家桶 here, but I will list the main technical points one by one.

1.vue-cli: Build the basic skeleton of a Vue project, a scaffolding tool

2.sass-loader&node-sass: I use Sass as the pre-compiler tool for styles, and both are indispensable. Everyone can also choose for themselves, less, stylus are both okay

3.postcss: The key to implementing responsive layout, px=>rem. The Great Desert has proposed a layout scheme based on vw, vh, but I am temporarily holding a wait-and-see attitude.

4.vuex: Manage complex data flow, state machine tools, and specialized Flux

5.vuex-persistedstate: A tool for persisting Vuex state

6.vue-router: Implement page navigation between SPAs

7.vue-lazyload: Implement image lazy loading to optimize HTTP transmission performance

8.vue-awesome-swiper: Implementation of the carousel function and some special transition effects

9.better-scroll: Implement list scrolling and the scrolling issue between parent and child components

10.axios: http tool, implement data requests to API, as well as the implementation of interceptors

11.fastclick: solves300ms delay library

The above are all things I think a medium to large vue project needs to use, and there are also some like I used jsx syntax in the implementation of image upload, which needs babel-jsx such things do not have universality, so they are not listed.

The following briefly describes the things mentioned above, some of which will be elaborated separately:

1.vue-cli：

https://github.com/vuejs/vue-cli

Scaffold tool, when we choose vue as our development technology stack, we need to start building the directory and development environment for our project. After installing node, install it through the following command

npm install -g vue-cli Will vue-cli Install to global environment

vue init webpack my-vue-demo Create a named my based on webpack template-vue-demo file name vue project

Here are the templates6In, but we use webpack more commonly.

During this period, you will see some such as e2e such unit test tools and ESLint code quality detection tools, I think they are not necessary to install.

So, in fact, what we are most concerned about is the content under the src folder. You can see the figure below

The figure above is a vue that has been removed-The basic structure of cli, a mature vue skeleton on the project.

2&3 :sass,postcss

The era of writing CSS directly has passed, the pre-compiled style processors help us liberate productivity and improve efficiency. Sass, less, stylus have their own advantages and disadvantages, and also have their own believers.

If you want to use Sass, you need to install Sass-loader and node-Sass, but node-Sass is not very easy to install, it is strongly blocked, it is recommended to use taobao's mirror. If there is still an error and it cannot be parsed after installation, you may need to check whether the corresponding loader is set correctly in webpack.base.conf.js.

Common functions of postcss

px2rem => It can help us convert px to rem units, just define the corresponding conversion standards.

autoprefixer => Compatibility handling, postcss can also help us handle it well.

//vue-loader.conf.js
module.exports = {
 loaders: utils.cssLoaders({
 sourceMap: isProduction
 ? config.build.productionSourceMap
 : config.dev.cssSourceMap,
 extract: isProduction
 }),
 postcss: [
 require('autoprefixer')({
 browsers: ['iOS >= 7', 'Android >= 4.1']
 }),
 require('postcss',-px2rem')
 ({ remUnit: 64 })
 ]
}

4,5:vuex,vuex-persistedstate

https://github.com/robinvdvleuten/vuex-persistedstate

A medium to large Vue project definitely has complex states that need to be managed. Simple event bus is no longer applicable.

The specialized Flux architecture, Vuex is right on top. In short: it is our state management tool for handling multiple operations such as user actions, API returns, URL changes, etc. I will talk about Vuex in detail later.

People who have used Vuex may find a very painful point, that is, the state in Vuex is released as soon as we refresh it. Some states are okay, and if they are missing, we can let the user re-operate. But operations like login, you can't let the user log in just by refreshing. Of course, you might say, we can store it in local or cookie. It can be! But in this way, the state forms a loose association with the data in local, making the state very fragile because you can't predict when you might forget to write a setStore method. Vuex-Persistedstate solves this kind of problem for us, it directly maps the state to the local cache environment, and we can use the mapState auxiliary function provided by Vuex in computed to dynamically update the data in local. We can still refresh and release it without persistent state.

6.vue-router

When we use Vue to build SPA applications, it means that we have completely separated the front-end from the back-end. Or to put it more simply: this is a pure front-end project. The back-end only provides data, and any logic is implemented on the front-end. Since we have 'detached' from the back-end, there is no such thing as request mapping for synchronous URL mapping. So, the front-end needs a router to achieve the page navigation of our front-end 'pages'. Vue-The router helps us with this kind of thing, it provides route guards for us, which allows us to set global and component-level route guards to implement specific business logic. It provides transition animations to more vividly showcase the style that a SPA application should have, etc. This will be discussed in detail later.

7.vue-lazyload

https://github.com/hilongjw/vue-lazyload

Implementing image lazy loading. This is a necessary problem for front-end performance optimization: images. Lazy loading can reduce the number of requests and also has a good transition in a direct visual sense. Of course, we also need to do some processing with the images, such as using webp format to reduce the quality of the images, or processing the images through oss.

8.vue-awesome-swiper

https://github.com/surmon-china/vue-awesome-swiper

Through it, it can achieve basic carousel, horizontal switching, and horizontal list scrolling, etc.

For example, if I want to implement a function with four tab switches, but the simple display effect is not very satisfying to me. Then we can use swiper to achieve this, and the content within each tab will correspond to a swiper.-The item's tab switch, which is actually the next page or previous page within the swiper.

data(){
　　return{
　　　　swiperOption: {
  slidesPerView :'auto',
  direction: 'horizontal',
  freeMode : true,
  loop: false,
  spaceBetween: 20,
 　　　},
 }
}

<swiper :options="swiperOption" ref="swiper" v-if="list&& list.length !== 0">
  <swiper-slide v-for="(item,index) in list" :key="index" class="hot-item">
  <router-link :to="{name:'quickCar',params:{carID:item.CarID}}" class="description_car">
  <img v-lazy="item.Attachments.length !==0 && item.Attachments[0].FilePath"/>
   <span>¥{{item.price}}/日</span>
  </router-link>
  </swiper-slide>
 </swiper>
 <p class="noData" v-else></p>

9.better-scroll

https://github.com/ustbhuangyi/scroll to implement the prohibition of parent route from scrolling with child route.-scroll

实现纵轴列表的滚动，以及当有嵌套的路由的时候，通过better-Implement vertical axis list scrolling, and when there are nested routes, scroll through better

scroll to implement the prohibition of parent route from scrolling with child route.-better-scroll because it is actually also possible to implement horizontal axis scroll, but why not use better-scroll to implement horizontal axis scroll, we cannot handle it in better-scorll in the content area of content to pull down our page. So a bug caused is that, in better-scroll in the area of horizontal axis scroll, the page cannot move.

As shown in the figure above: there is still content below the horizontal axis scroll, but it is impossible to pull down within the area shown in the picture. Therefore, the horizontal axis scroll is actually implemented through vue-awesome-swiper to implement.

10.axios

The basic function is to request data from the backend interface through axios. And axios can work better with router to implement similar backend interceptor functions, such as handling token expiration issues. Because when the token expires, it can only be handled through vue-The router's router.beforeEach is a bit helpless to handle it. At this time, it is necessary to cooperate with the backend response to return the code to process the URL.

11.fastclick

Solve the problem of point-through and click delay https://www.oldtoolbag.com/article/131369.htm

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, this site will immediately delete the infringing content.)