Vue Series——Vue2-webpack2The Path of Pitfalls in Framework Construction

react, vue, and angular represent3The idea of front-end engineering, mainly understanding the core concepts of the three major frameworks, such as components, lifecycle, unidirectional data flow, two-way binding, etc. These concepts are rarely systematically thought of in non-framework development, and many concepts are unfamiliar to beginners. They don't know where to start with a react, vue, or angular project. Below, I will build a vue project from scratch, learning vue's ideas while doing the project.

1, if I want to use vue, what should I do first?

If I want to learn vue, the first thing I should do is go to the vue official website to read the introduction:https://cn.vuejs.org/v2/guide... , looking closely, vue now has1.X and2.X vs2.X.

I selected the vue version, searched for the way to set up the vue framework on Zhihu, watched the various shares of predecessors, and learned about a called cooking What's so good about this thing?

The goal of cooking is to free you from the繁琐的构建配置, and at the same time, it also saves the trouble of installing a lot of development dependencies for each project. Based on webpack but with more user-friendly configuration options and easy-to-use extension configuration mechanisms, it allows you to focus on your project and forget about configuration.

Wow, seeing the official website of cooking introduced so well, I decided to follow its tutorial, messing around a bit, but found it not pleasant to use, one-click environment configuration looks very high-end, but you still need to learn how to use cooking, and you also need to install cooking locally, which makes me dizzy. Although I successfully accessed the web page in the browser, I still gave up this fun thing.

At this point, you can only build the project from scratch by yourself.

2, create a new vue on GitHub2-web project.

Open the GitHub homepage, click 'start a project'.

Next, you will see 'Create a new repository', which requires you to fill in project information, this step can be skipped.

Then the project is set up, clone it locally.

3, initialize npm

Use shell or cmd to enter the root directory of the project and execute the following command, just skip the options, and finally a package.json file will be generated.

npm init

4, install webpack

The feeling of not being able to live without webpack, but configuring webpack can also make one's life difficult, it's too hard to remember all the webpack configuration options, but don't worry, I have already taken care of this step for you, we all must use webpack2Ah.

npm install --save-dev webpack

We still need a front-end server for hot updates, webpack-dev-server登场。

npm install --save-dev webpack-dev-server

5, create webpack.config.js file

It is not much different from the webpack configuration file in React, just slightly change one place and it can be used directly.

Never put js and vue together, it doesn't work, they must be separated, must, this pit I have fallen into, it has wasted me several hours to find this pit, the most concealed one.

rules: [{
   test: /\.js$/,
   use: ['babel-loader],
   exclude: /node_modules/,
   include: resolve('src')
  },{
   test: /\.vue$/,
   use: ['vue-loader],
   exclude: /node_modules/,
   include: resolve('src')
  },

6, create .babelrc file.

babel is indispensable, note that here we are not using React, but Vue, including the following plugins, flow-vue, transform-vue-jsx.

{
 "presets": ["es2015"-vue-0-2"]
 "plugins": ["transform-vue-jsx"],
 "comments": false,
 "env": {
 "production": {
  "plugins": [
  ["transform-runtime", { "polyfill": false, "regenerator": false }]
  ]
 }
 }
}

7Add start command in package.json

Directly use webpack-dev-The server started, wow, a lot of errors, saying that some module is missing. This is simple because a lot of modules are referenced in the configuration file, but they have not been installed in the project yet. In this case, just install them one by one.

"start": "webpack-dev-server",

8Project entry main.js file.

The filename can be named as you like, the code is quite simple, instantiate a Vue and router, doesn't it look very similar to the entry file of React? Of course, I am doing a SPA, so I adopt the single entry form. If it is not an SPA mode, it is not this configuration method.

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes';
import VueResource from 'vue-resource';
Vue.use(VueResource); //HTTP request registration
Vue.use(VueRouter); //Routing registration
// Instantiate routing
const router = new VueRouter({
 // mode: 'history', //H5 Routing mode, needs server-side rendering to prevent404Error
 base: __dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  Non-mandatory
//  module.hot.accept('./App.vue', () => render);
// }

9, routing routes.js

Routing is very similar to React (almost the same), and the Vue pages here use the .vue suffix to write.

import Home from '.'/components/home/Home.vue';
import Bang from './components/bang/Bang.vue';
export default [
 {
  path: '/',
  redirect: 'home'
 },
 {
  path: '/home',
  component: Home
 },
 {
  path: '/bang',
  component: Bang
 }
]

10, single-page top-level container App.vue

From index, this is the file, and I will start learning the essence of Vue now.

template: Vue's template language, also known as jsx.

transition: Transition animation.

router-view: The routing display container, through router-The .vue that jumps and loads will be rendered in this container. router-link has been encapsulated in the nav.vue component.

script: Imported Vue components required by the current top-level container, including header, navigation, and home page. There are more settings that I have not studied, and I will delve deeper into them in subsequent learning.

style: The current component's style, I have configured less syntax support. Change style to <style lang="less"> to write less.

<template>
 <div>
  <app-header logo="logo" ></app-header>
  <app-nav></app-nav>
  <transition name="fade" mode="out-in">
   <router-view class="view"></router-view>
  </transition>
 </div>
</template>
<script>
 import Header from '.'/components/common/Header.vue';
 import Nav from '.'/components/common/Nav.vue';
 import Home from '.'/components/home/Home.vue';
 export default {
  name: 'App',
  components: {
   "app-header": Header,
   "app-nav": Nav,
   "app-home": Home
  }
 };
</script>
<style>
 body, html {
  font-size: 12px;
  margin: 0;
  padding: 0;
 }
</style>

During the process of bumping into the pit, I also encountered several error situations, which were all solved successfully in the end.

If you want to see more detailed vue component code, you can see the specific project:https://github.com/hyy1115/vu...

Next, I will continue to improve this project and explore a more flexible vue architecture implementation.

Running effect diagram:vue-Kuwo demo

Summary

The above is what the editor introduces to everyone - vue series - vue2-webpack2This is the process of building a framework, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in a timely manner. I also want to express my heartfelt thanks to everyone for their support of the呐喊 tutorial!