vue經常使用手冊

時間  2019-11-20
標籤 vue 經常 使用手冊 简体版
原文   原文鏈接

1.搭建vue的開發環境：

1.必需要安裝node.jscss

2.安裝vue的腳手架工具 官方命令行工具html

npm install --global vue-cli

3.新建項目vue

vue init webpack-simple gw

而後一直回車，新建完成後，cd到gw目錄下，執行node

cnpm install

4.運行項目webpack

npm run dev

運行成功後，能夠經過訪問web

http://localhost:8080/

2.vue路由

vue路由的意思就是不用手動掛載組件，實現動態掛載的方式

1.基礎路由

  1. 安裝vue-routervue-router

cnpm install vue-router --save

2.在src/main.js中vuex

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中vue-cli

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

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

4.從新運行項目，訪問：npm

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

 

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
    })
  ])
}
View Code

而後重啓項目，發現不報錯了。

 

 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

官網

https://www.iviewui.com/docs/guide/install

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

而後重啓項目，發現不報錯了。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程