vue常用手册 - 爱码网

1.必须要安装node.js

2.安装vue的脚手架工具官方命令行工具

npm install --global vue-cli

3.新建项目

vue init webpack-simple gw

然后一直回车，新建完成后，cd到gw目录下，执行

cnpm install

4.运行项目

npm run dev

运行成功后，可以通过访问

http://localhost:8080/

2.vue路由

vue路由的意思就是不用手动挂载组件，实现动态挂载的方式

1.基础路由

1. 安装vue-router

cnpm install vue-router --save

2.在src/main.js中

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1.创建组件
import Home from './components/Home.vue';
import New from './components/New.vue';

//2.配置路由
const routes=[
  {path:'/home',component:Home},
  {path:'/news',component:New},
  {path:'*',redirect:'/home'}
]

//3.实例化VueRouter
const router=new VueRouter({
  routes
})

//4.挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

//5.在根组件App.vue的模板中，放入<router-view></router-view>

3.在src/App.vue中

<template>
  <div id="app">
     <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg:'你好'
    }
  }    
}
</script>
<style>
</style>

4.重新运行项目，访问：

http://localhost:8080/#/home
http://localhost:8080/#/news

即可看到两个组件被挂载了。

2.路由跳转

1.通过标签跳转

1.在src/App.vue的模板中加入router-link

<template>
  <div id="app">
      <router-link to="/home">首页</router-link>
     <router-link to="/news">新闻</router-link>
     
     <hr>
     <router-view></router-view>
     
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg:'你好'
    }
  }    
}
</script>
<style>
</style>

2.通过js跳转

1.在src/components/Home.vue中

<template>
    <div>
        <h2>这是一个首页组件</h2>
        <v-header></v-header>
        <button @click="goNews()">通过js跳转到新闻页面</button>
    </div>
</template>
<script>
export default {
    methods:{
        goNews(){
            this.$router.push({path:'/news'})
        }
    }
}
</script>
<style>

</style>

3.父子路由

1.在src/components目录下新建User.vue文件，同时再新建User目录，在User目录下新建UserAdd.vue和UserList.vue两个文件

User.vue

<template>
    <div id="user">
        <div class="user">
            <div class="left">
                <ul>
                    <li>
                        
                        <router-link to="/user/useradd">增加用户</router-link>
                    </li>
                    <li>
                        
                        <router-link to="/user/userlist">用户列表</router-link>
                    </li>
                </ul>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>

        </div>
        
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="scss" scoped>
    .user{
        display: flex;
        .left{
            width: 200px;
            min-height: 400px;
            border-right: 1px solid #eee
        }
        .right{
            flex: 1;
        }
    }
</style>

UserAdd.vue

<template>
    <div id="adduser">
        用户增加
    </div>
</template>

UserList.vue

<template>
    <div id="userlist">
        用户列表
    </div>
</template>

3.在src/main.js中

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1.创建组件
import Home from './components/Home.vue';
import New from './components/New.vue';
import User from './components/User.vue';
  import UserAdd from './components/User/UserAdd.vue';
  import UserList from './components/User/UserList.vue';

//2.配置路由
const routes=[
  {path:'/home',component:Home},
  {path:'/news',component:New},
  {
    path:'/user',
    component:User,
    children:[
      {path:'useradd',component:UserAdd},
      {path:'userlist',component:UserList}
    ]
  },
  {path:'*',redirect:'/home'}
]

//3.实例化VueRouter
const router=new VueRouter({
  // mode:'history',
  routes
})

//4.挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

//5.在根组件App.vue的模板中，放入<router-view></router-view>

4.路由模块化

1.在src目录下新建router目录，router目录下新建router.js

import Vue from 'vue'

import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1.创建组件
import Home from '../components/Home.vue';
import New from '../components/New.vue';
import User from '../components/User.vue';
  import UserAdd from '../components/User/UserAdd.vue';
  import UserList from '../components/User/UserList.vue';

//2.配置路由
const routes=[
  {path:'/home',component:Home},
  {path:'/news',component:New},
  {
    path:'/user',
    component:User,
    children:[
      {path:'useradd',component:UserAdd},
      {path:'userlist',component:UserList}
    ]
  },
  {path:'*',redirect:'/home'}
]

//3.实例化VueRouter
const router=new VueRouter({
  // mode:'history',
  routes
})

export default router;

//5.在根组件App.vue的模板中，放入<router-view></router-view>

2.在src/main.js中

import Vue from 'vue'
import App from './App.vue'

import router from './router/router.js';

//4.挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

3.element UI的使用

官网

http://element-cn.eleme.io/#/zh-CN/component/installation

1.安装

cnpm i element-ui -S  //-S表示 --save

2.将配置代码引入main.js中

配置代码：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

main.js

import Vue from 'vue'
import App from './App.vue'


//elementsUI 的使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);




import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1.创建组件
import Home from './components/Home.vue';
import New from './components/New.vue';
import User from './components/User.vue';
  import UserAdd from './components/User/UserAdd.vue';
  import UserList from './components/User/UserList.vue';

//2.配置路由
const routes=[
  {path:'/home',component:Home},
  {path:'/news',component:New},
  {
    path:'/user',
    component:User,
    children:[
      {path:'useradd',component:UserAdd},
      {path:'userlist',component:UserList}
    ]
  },
  {path:'*',redirect:'/home'}
]

//3.实例化VueRouter
const router=new VueRouter({
  // mode:'history',
  routes
})

//4.挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

//5.在根组件App.vue的模板中，放入<router-view></router-view>

View Code