How to build the vue2-webpack2 framework

This time I will show you how to build the vue2-webpack2 framework. What are the precautions for building the vue2-webpack2 framework. The following is a practical case, let’s take a look.

react, vue, and angular represent three front-end engineering ideas. Learning the three major frameworks is mainly to understand their core concepts, such as components, life cycle, and one-way Data flow, two-way binding, etc. In non-framework development, few people think about these concepts in such a systematic way. For novices, they have never been exposed to many concepts and don’t know where to start a react, vue or angular project. Below I will start with Build a Vue project from scratch and learn the ideas of Vue while working on the project.

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

If I want to learn vue, the first thing I do is go to the vue official website to read the introduction: https://cn.vuejs.org/v2/guide... , take a closer look, vue now has 1.X The difference from 2.X is very good. I decisively choose 2.X.

After selecting the vue version, I searched Zhihu for how to build the vue framework. After reading various sharings from seniors, I learned about a good thing called cooking. What’s so good about it?

The goal of cooking is to free you from tedious build configurations and the hassle of installing a bunch of development dependencies for each project. Based on webapck but with more friendly configuration items and easy-to-use extended configuration mechanism, you can focus on the project and forget about configuration.

Wow, I saw that the official website of cooking provided such a good introduction, so I decisively followed its tutorial. After messing around for a while, I found that it was not comfortable to use. The one-click configuration environment seemed very high-end, but I still had to learn how to use cooking. , and I had to install cookies locally, which made me dizzy. Although I successfully accessed the web page in the browser, I still gave up on this good thing.

At this time, you can only build the project from scratch.

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

Open the github homepage and click start a project.

Then you will see Create a new repository, which requires you to fill in the project information. This step is skipped.

Then the project is built and cloned locally.

3. Initialize npm

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

npm init

4. Install webpack

It feels like you can't live without webpack, but configuring webpack will also make you unable to live. It's too difficult to remember the configuration items of webpack, but don't worry, I have helped you get this step done. We all must use webpack2.

npm install --save-dev webpack

A front-end server is also needed for hot updates, and webpack-dev-server appears.

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

5. Create webpack.config.js file

It is no different from the webpackconfiguration file in react. It can be transplanted and used with just a slight change.

Never put js and vue together. If it doesn't work, they must be separated. I have to step on this pit. I wasted several hours looking for this pit in 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 react is not used here, but vue, 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 in package.json

Directly use webpack-dev-server to start, wow, a bunch of errors, saying which module is missing, this is simple, because a bunch of modules referenced in the configuration file have not been installed in the project, so just install them one by one at this time.

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

8. Project entry main.js file.

这个文件名自己喜欢咋取就咋取，代码挺简单的，实例化一个Vue和路由，是不是和react的入口文件很像？当然，我做的是SPA，所以采用单入口的形式，如果是非SPA模式，就不是这种配置方式了。

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请求注册
Vue.use(VueRouter); //路由注册
// 实例化路由
const router = new VueRouter({
 // mode: 'history', //H5 路由模式，需要服务端做渲染防止404错误
 base: dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  非必须
//  module.hot.accept('./App.vue', () => render);
// }

9、路由routes.js

路由和react也非常像（简直一样好不），这里的vue页面采用.vue后缀的方式来写。

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、单页顶层容器App.vue

从index进来，就是这个文件，现在开始学习vue的精华。

template：vue的模板语言，也叫作jsx。

transition：过渡动画。

router-view：路由显示容器，通过router-link跳转加载的.vue会在这个容器渲染。router-link被我封装到nav.vue组件里面了。

script：导入了当前顶级容器需要用到的vue组件，包括头部、导航、首页。还有更多丰富的设置我没有研究，后续的学习中会深入下去。

style: 当前组件的样式，我配置了less语法支持。将style改成

<template>
 <p>
  <app-header></app-header>
  <app-nav></app-nav>
  <transition>
   <router-view></router-view>
  </transition>
 </p>
</template>
<script>
 import Header from &#39;./components/common/Header.vue&#39;;
 import Nav from &#39;./components/common/Nav.vue&#39;;
 import Home from &#39;./components/home/Home.vue&#39;;
 export default {
  name: &#39;App&#39;,
  components: {
   "app-header": Header,
   "app-nav": Nav,
   "app-home": Home
  }
 };
</script>
<style>
 body, html {
  font-size: 12px;
  margin: 0;
  padding: 0;
 }
</style>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue-cli+webpack怎样搭建vue开发环境

原生JS如何对多个滚动条同步操作

mint-ui怎样实现无限滚动加载功能

The above is the detailed content of How to build the vue2-webpack2 framework. For more information, please follow other related articles on the PHP Chinese website!