A simple example of vue + vueRouter + webpack, vuerouterwebpack

A simple example of vue + vueRouter + webpack, vuerouterwebpack

I recently learned vue version 2.0 Before Version 2.0. Now I have updated it again, the key is that I updated vux three weeks ago at 2.0, and vux has not been updated at the same time, as a result, when I use vux, I need to downgrade the vue version back to 1.xand vue-router back to 1.0 for use ~~~ So today, I will write an instance of tabbar below a single page to record it. I hope that you will have less trouble using vue buckets, of course not using vux =... It's just an imitation.

In the demo here, I will use the simple-template of vue2.0 as the scaffold, and the vue-router version is also 2.0. If you want to use vux as the component library, you can downgrade the version ~ By the way, if you officially write a project, remember to use vuex. It's not a joke. I wrote a simple single-page application, and I didn't use vuex or the component library. I wrote it all by hand, then there is a lot of trouble in communication between components. Can you imagine that after constantly broadcasting events $ boardCast, you can continue to distribute $ emit speechless ...... In the end, I had a mess, so I recommend using vuex if I did not write a demo but started the project. If I have used react, I will know that vuex is the same as redux ~ Only one for vue and one for react.

Okay. Start building ~

Prerequisites: Node. js (> = 4.x, 6.x preferred) and Git.

The premise is that the node is installed and the version has been upgraded to 6.x. it is described in the tutorial of using UDA vue-cli. Here we create a configuration template in an automated way.

Start from scratch, open the root directory of the project to be created, and then open the git command line ~

1. Global installation of vue-cli scaffolding

npm install -g vue-cli 

2. initialize the webpack + vue scaffold template. Here I use a simplified template without unit testing ~ I don't know much about the many others .......... I can probably understand the simplified version, which is also the reason for my food =...

vue init webpack-simple <project-name> Let me name it test.

vue init webpack-simple test

3. Follow the steps.

cd test 

npm install The babel and vue loaders and other Dependencies will be installed here. It will take a while and it will be a little slow.

npm run dev Run the local file to see if the vue page is complete.

4. Install vue-router and the required component library. Here, I want to install ElementUI, A ELE. Me Component Library. The address is http://element.eleme.io/. it can be used for a moment because it is compatible with vue2.0 ~ The official documentation is complete. You can see what you need. I will simply use it here.

npm install vue-router npm i element-ui -D 

5. Remember to install the css loader. If you use less or sass, you can add it to the loader.
Npm install style-loader css-loader if you are correct, Your loader should be like this now, and add element-ui to the dependent file in package. json.

// Package. json "dependencies": {"element-ui": "^ 1.0.4", "vue": "^ 2.1.0"} // webpack. config. jsmodule: {rules: [{test :/\. vue $/, loader: 'vue-loader ', options: {// vue-loader options go here },{ test :/\. js $/, loader: 'babel-loader ', exclude:/node_modules/}, {test :/\. css $/, loader: 'style-loader! Css-loader '}, {// Add this rule. This is the test:/\. (eot | svg | ttf | woff | woff2 )(\? \ S *)? $/, Loader: 'file-loader '}, {test :/\. (png | jpg | gif | svg) $/, loader: 'file-loader ', options: {name:' [name]. [ext]? [Hash] '}]}

6. modules and write Components
The following shows my file directories first.

testdist build.jsnode_modules …src App.vuediscovery.vueindex.vueinfo.vuemain.jssetting.vue.babelrc.gitignoreindex.htmlpackage.jsonREADME.mdwebpack.config.js

// App. vue) <template> <div id = "app"> <router-view> </router-view> <div class = "tabbar" @ click = "select"> <router-link: class = "{'selected ': indexPage = 'index'} "to ="/index ">  <label> Home </label> </router- link> <router-link: class = "{'selected': indexPage = 'info'}" to = "/info">  <label> Information </label> </router-link> <router-link: class = "{'selected ': indexPage = 'discovery '} "to ="/discovery ">  <label> found </label> </router- link> <router-link: class = "{'selected': indexPage = 'setting'}" to = "/setting">  <label> Settings </label> </router-link> </div> </template> <script> export default {name: 'app', data () {return {radio: '1', indexPage: 'index' }}, methods: {select (event) {function findA (target) {if (target. nodeName! = 'A') {return findA (target. parentNode)} return target;} var modules = findA(event.tar get ). lastElementChild. innerHTML; if (modules = 'homepage') {this. indexPage = 'index';} else if (modules = 'info') {this. indexPage = 'info';} else if (modules = 'discover') {this. indexPage = 'discovery ';} else if (modules = 'settings') {this. indexPage = 'setting' ;}}}</script> <style> html, body {margin: 0; padding: 0 ;}# app {font-fami Ly: 'Microsoft yahei', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50 ;}. tabbar {position: fixed; bottom: 0; display: flex; width: 100%; height: 55px; flex-direction: row; background: rgba (247,247,250 ,. 9); font-size: 12px ;}. tabbar: before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #979797; color: #979797;-webkit-transform-origin: 0 0; transform-origin: 0 0;-webkit-transform: scaleY (. 5); transform: scaleY (. 5); background-color: white ;}. tabbar a {flex: 1; color: #888 ;}. tabbar a img {display: block; width: 24px; height: 24px; margin: 3px auto; padding-top: 5px ;}. selected {color: #09bb07! Important;} h1, h2 {font-weight: normal;} ul {list-style-type: none; padding: 0;} li {display: inline-block; margin: 0 10px;} a {text-decoration: none ;}</style>

// Index. vue (Home Page module, with a little elementUI, something nice to watch = ..) <template> <div> 
// Info. vue (Home Page module, with a little elementUI, something nice to watch = ..) <template> 

// Discovery. vue (Discovery module) <template> <div> 

// Setting. vue (setting module) <template> <div class = "block"> 

// Main. js (main file, declare global router) import Vue from 'vue 'import Router from 'vue-router' import ElementUI from 'element-Ui' import 'element-ui/lib/theme-default/index.css 'import App from'. /App. vue 'import index from '. /index. vue 'import info from '. /info. vue 'import discovery from '. /discovery. vue 'import setting from '. /setting. vue 'vue. use (Router); Vue. use (ElementUI); const router = new Router ({routes: [{path: '/', component: index}, {path: '/Index', component: index }, {path: '/info', component: info}, {path:'/discovery ', component: discovery}, {path:'/setting ', component: setting}]}); new Vue ({el: '# app', render: h => h (app), router: router });
Add the token to it ~ You can write it in my other note, "getting started with webpack ".

Finally, npm run dev will check the effect and it will be OK ~ If you want to change the bound port number or host number, change it in package. json.

Example:
"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --port 8181 --open --inline --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }
The port number is -- port <port> in dev, and the host number is -- host 
Finally, let's show it to you ~ If you have not read vue-router, please read the documentation =... I am just presenting the most basic information here.

 

Http: // localhost: 8181/#/index

 

Http: // localhost: 8181/#/info

 

Http: // localhost: 8181/#/discovery

 

Http: // localhost: 8181/#/setting
In fact, it is a few simple code and component division. You should have a look at it and understand it. In the end, you can update vux 2.0 quickly. 555 ~ I went to see vuex.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.