Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces "how to build the vue2-webpack2 framework" in detail, the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to build the vue2-webpack2 framework" can help you solve your doubts.

1. What should I do first if I want to use vue?

The goal of cooking is to free you from tedious build configurations while saving you the hassle of installing development dependencies for each project. Based on webapck but more friendly configuration items, easy-to-use extension configuration mechanism, let you focus on the project and forget the configuration.

Wow, see the cooking official website introduced so well, I decisively follow its tutorial, fooling around for a while, found that the use of ah, one-click configuration environment looks very high-end, but also have to learn the use of cooking, and the local installation of cooking, make me dizzy, although the browser successfully visited the web page, but I still gave up this good thing.

At this time, I have no choice but to build the project from 0.

2. Create a new vue2-web project in github.

Open the home page of github and click start a project.

Then you will see Create a new repository, which requires you to fill in the project information. Skip this step.

Then the project is built, and the clone goes locally.

3. Initialize npm

Use shell or cmd to enter the project root directory, execute the following command, skip the options directly, and finally generate the package.json file.

Npm init

4. Install webpack

It feels like you can't live without webpack, but configuring webpack will also make it impossible to live. It's too hard to remember the configuration items of webpack, but don't worry, I've already done this for you. We all have to use webpack2.

Npm install-save-dev webpack

Also need the front-end server, do hot updates, webpack-dev-server debut.

Npm install-save-dev webpack-dev-server

5. Create a webpack.config.js file

It is no different from the webpack configuration file in react, except that it can be ported to use with a slight change.

Never put js and vue together, those that don't work must be separated. I have already stepped on this hole. I have wasted several hours in order to find this hole, the most hidden place.

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 a .babelrc file.

Babel is indispensable. Note that instead of using react, vue is used here, including the following plug-ins, flow-vue and transform-vue-jsx.

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

7. Add the start command to package.json

Directly use webpack-dev-server to start, wow, a bunch of errors, say which module is missing, this is simple, because the pile of module referenced in the configuration file has not yet been installed into the project, it can be installed one by one.

"start": "webpack-dev-server"

8. Project entry main.js file.

This file name can take whatever you like, the code is very simple, instantiate a Vue and routing, is it very similar to the entry file of react? Of course, I do SPA, so I use a single entry form, if it is non-SPA mode, it is not this way of configuration.

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 to register Vue.use (VueRouter) / / Route registration / / instantiated routing const router = new VueRouter ({/ / mode: 'history', / / H5 route pattern, which requires server rendering to prevent 404 errors base: _ _ dirname, linkActiveClass:' on', routes}) let render = new Vue ({router, el:'# app', render: h = > h (App)}); render / / if (module.hot) {/ / optional / / module.hot.accept ('. / App.vue', () = > render); / /}

9. Routing routes.js

Routing and react are also very similar (almost as good), and the vue page here is written with a .vue suffix.

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

Come in from index, this is the file, and now start to learn the essence of vue.

Template:vue 's template language, also known as jsx.

Transition: transition animation.

Router-view: the route shows the container in which .vue loaded through the router-link jump will be rendered. Router-link is encapsulated by me in the nav.vue component.

Script: imports the vue components needed by the current top-level container, including header, navigation, and home page. There are more rich settings I have not studied, and I will go further in the follow-up study.

Style: the style of the current component, I configured less syntax support. Change style to write less.

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}}; body, html {font-size: 12px; margin: 0; padding: 0;}

In the process of stepping on the pit, we also encountered several false reports, which were solved satisfactorily in the end.

Next I will continue to refine the project and explore a more flexible implementation of the vue architecture.

Running effect picture: vue- cool demo

After reading this, the article "how to build the vue2-webpack2 Framework" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.