vue常用手册

玩蛇的胖纸

发布于 2018-12-25 14:59:28

8190

发布于 2018-12-25 14:59:28

文章被收录于专栏：雪胖纸的玩蛇日常雪胖纸的玩蛇日常

1.搭建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>

3.配置webpack.config.js，加入字体配置代码

配置代码

{
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      }

    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

然后重启项目，发现不报错了。

4.vuex

vuex是一个专门为vue.js应用程序开发的状态管理模式，解决不同组件之间的同一状态共享问题，数据共享问题，数据持久化

1.安装

cnpm install vuex --save

2.在src目录下新建目录vuex，在vuex目录下新建store.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

// 1.state在vuex中用于储存数据
var state={
    count:1
}

// 2.mutations里面放的是方法，方法主要内容用于改变state里面的数据
var mutations={
    incCount(){
        ++state.count
    }
}

// 实例化Vuex.store
const store=new Vuex.Store({
    state,
    mutations:mutations
})

export default store;

3.在src/components/Home.vue中使用

<template>
    <div>
        <h2>这是一个首页组件</h2>
        <button @click="goNews()">通过js跳转到新闻页面</button>
        <!-- 3.使用 -->
        <h2>全局变量--{{this.$store.state.count}}</h2>
        <h2>{{this.i}}</h2>
        <button @click="addcount()">增加数量+</button>
    </div>
</template>
<script>
// 1.引入store
import store from '../vuex/store.js';
// 2.注册
export default {
    store,
    methods:{
        goNews(){
            this.$router.push({path:'/news'})
        },

        addcount(){
            // 改变vuex.store里面的数据
            
            this.$store.commit('incCount');
        }
    },
    data(){
        return{
            i:0
        }
    },
    mounted(){
        this.i=this.$store.state.count
    }
}
</script>
<style>

</style>

5.使用iview

官网

http://v1.iviewui.com/components/carousel

1.安装

cnpm install  iview  --save

2.在src/main.js加入

import iView from 'iview'
import 'iview/dist/styles/iview.css'    // 使用 CSS
Vue.use(iView)

3.配置webpack.config.js，加入字体配置代码

配置代码

{
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },

webpack.config.js

View Code

然后重启项目，发现不报错了。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-12-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度