vue steps to create a project

# Global installation vue-cli

$ npm install --global vue-cli

# Create a new project based on a template webpack

$ vue init webpack my-project

# Install dependencies, you go

$ cd my-project

$ npm install

$ npm run dev

index.js change the configuration automatically open a browser in config

Installation Routing

download npm i vue-router -S

Create a configuration file router.js

1  // lead packet 
2 Import from VueRouter 'VUE-Router'
 . 3  // import the corresponding routing component 
. 4 Import from Home './components/home.vue'
 . 5  // create a route object 
. 6  var Router = new new VueRouter ({
 . 7    routes: [
 . 8      // configure routing rules 
. 9      {path: '/', the redirect: '/ Home' },
 10      {path: '/ Home' , Component: Home}
 . 11    ]
 12 is  })
 13 is  
14  // the route object exposed to 
15 Export default Router

main.js file configuration

. 1 Import from Vue 'VUE'
 2 Import from the App './App'
 . 3  
. 4  / * 1.1 import route packet * / 
. 5 Import VueRouter 'VUE-Router' from
 . 6  / * 1.2 install Routing * / 
. 7  Vue.use (VueRouter )
 8  
9  / * 1.3 import your own router. js routing module * / 
10 Import from Router './router.js'
 . 11  
12 is  
13 is  / * eslint-NO-disable new new * / 
14  new new Vue ({
 15    EL: '#app' ,
 16    Components: the App {},
 . 17    Template: '<the App />' ,
18    / * 1.4 mount to the routing object instance VM * / 
. 19    Router
 20 is })

In App.vue file referenced by router-view display content label

//内容content
    <transition>
      <router-view></router-view>
    </transition>

Through router-link tag to Jump

 <router-link class="mui-tab-item" to="/home">

<router-link class="mui-tab-item" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
</router-link>

vue steps to create a project

Guess you like