Vue2 Rewrite Cnodejs Community app

Refer to original author open source code: Https://github.com/shinygang/Vue-cnodejs

Learning projects with the aim of learning, practicing and improving

node:v6.9.5 npm:3.10.10 vue:2.8.1

1. Project Construction

Installing the VUE-CLI scaffold NPM i vue-cli-g

Create a Webpack project and download dependent vue init webpack Vue-cnodejs

Install dependent CD Vue-cnodejs

NPM I

hot start npm run dev successfully pops up Web page and builds successfully

Installing Vuex NPM i Vuex--save

Fastclick Eliminate Click Delay

Zepto Lightweight, jquery-compatible JavaScript library

Installing the Sass Loader NPM install Node-sass--save-dev

NPM Install Sass-loader--save-dev

In the. vue file via <style lang= "SCSS" ></style> use

//   build/webpack.base.conf.js    module: {    rules: [      ...      ] {        /\.scss$/,        loaders: ["Style", "CSS", "sass"]      },      ...    ]  }

2. Initialization

　Modifications to index.html and main.js, no longer using APP.VUE as the initialization component, directly using the Index.vue as the initialization component

Index.html
<! DOCTYPE html>
Lazy loading of the route, where the original author's writing has been changed, the specific content can refer to http://router.vuejs.org/zh-cn/advanced/lazy-loading.html
In addition, a number of changes have been made to the directory structure of the original author, incorporating components and views (the reason why the original author was not separated)
// The original author's wording // Require.ensure is a special syntax for Webpack, which is used to set the Code-splitPoint const Home = Resolve = {    require.ensure ([' .. /components/index.vue '], () = {        resolve (require (' ... /components/index.vue '     ));}; // in accordance with the AMD specification, const HOME = Resolve = require ([' ... /components/index.vue '],resolve);
Vue2 Rewrite Cnodejs Community app