1.搭建vue的开发环境：
1.必须要安装node.js
2.安装vue的脚手架工具 官方命令行工具
npm install --global vue-cli3.新建项目
vue init webpack-simple gw然后一直回车，新建完成后，cd到gw目录下，执行
cnpm install4.运行项目
npm run dev运行成功后，可以通过访问
http://localhost:8080/2.vue路由
vue路由的意思就是不用手动挂载组件，实现动态挂载的方式
1.基础路由
1. 安装vue-router
cnpm install vue-router --save2.在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/installation1.安装
cnpm i element-ui -S //-S表示 --save2.将配置代码引入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 --save2.在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/carousel1.安装
cnpm install iview --save2.在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 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
21.路由模块化
更多 >目录
腾讯云开发者
