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> 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.htmlmodule.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

然后重啟項目，發現不報錯了。

?

?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

轉載于:https://www.cnblogs.com/xuepangzi/p/10091136.html

總結

以上是生活随笔為你收集整理的vue常用手册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。