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

官网

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

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

vue常用手册的更多相关文章

  1. vue 常用手册

    基本使用 引入vue.js 创建Vue对象, 指定选项对象 el : 指定dom标签容器的选择器 data : 指定初始化状态属性数据的对象对象/函数(返回一个对象) 页面中 使用v-model: 实 ...

  2. 超级有用的各类web常用手册

    以下是链接地址: 各种web常用手册

  3. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  4. vue常用

    vue常用的路由的状态管理

  5. 五、vue常用UI组件

    下面简单的总结下vue常用的一些UI 组件,有一些我也没怎么用过,这里先罗列出来,便于自己后面使用的时候查找方便,大家有更好的可以给我推荐哦~ vuex: vux github ui demo:htt ...

  6. (二)Vue常用7个属性

    学习vue我们必须之到它的7个属性,8个 方法,以及7个指令.787原则 el属性 用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符. data属性 用来组织从view中抽象出 ...

  7. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

  8. Vue常用的GitHub项目

    Vue常用的GitHub项目(Demo案例) 应用实例 https://github.com/pagekit/pa... pagekit-轻量级的CMS建站系统 https://github.com/ ...

  9. vue常用的修饰符

    v-model修饰符 <template> <div id="demo14"> <p>-----------------模板语法之修饰符---- ...

随机推荐

  1. PJSUA2开发文档--第八章 好友(Buddy)类

    8  好友(存在)Buddy PJSUA2的功能是围绕Buddy类为中心展开的.该类表示一个远端好友(伙伴,一个人或一个SIP端点). 8.1 子类化Buddy类 要使用Buddy类,通常应创建子类, ...

  2. Python面试常见的问题

    So if you are looking forward to a Python Interview, here are some most probable questions to be ask ...

  3. Mysql数据中Packet for query is too large错误的解决方法

    有时,程序在连接mysql执行操作数据库时,会出现如下类似错误信息: Packet for query is too large (4230 > 1024). You can change th ...

  4. admin组件

    Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTALLED_APPS 看到它 ...

  5. 用CMD打开chrome并导航到百度(golang)

    首选在cmd中输入(注意:根据你的电脑路径修改,可能是Progra~1): C:\Progra~\Google\Chrome\Application\chrome.exe www.baidu.com ...

  6. python3 二分法查找

    '''二分法查找有序列表掐头去尾取中间查找列表中xx在不在列表中,在,则返回索引值'''# lst = [1, 4, 6, 8, 9, 21, 23, 26, 35, 48, 49, 54, 67, ...

  7. leetcode 169. Majority Element 、229. Majority Element II

    169. Majority Element 求超过数组个数一半的数 可以使用hash解决,时间复杂度为O(n),但空间复杂度也为O(n) class Solution { public: int ma ...

  8. 在Mac OS X下使用Apache、PHP、MySQL、Netbeans、Yii

    本文环境: Mac OS X:10.8.4 Apache:2.2.22 PHP:5.3.15 Netbeans:7.3.1 Yii:1.1.14 Mac OS X是内置了Apache服务器的,不过默认 ...

  9. 【原创】微服务为什么一定要用docker

    引言 早在2013年的时候,docker就已经发行,然而那会还是很少人了解docker.一直到2014年,Martin Fowler提出了微服务的概念,两个不相干的技术终于走在了一起,创造了今天的辉煌 ...

  10. 工作小结:xml文件导入到oracle

    上周遇到xml文件导入到oracle数据库中,发现正常的xml转成excle格式导入,只针对于1m以下的xml文件.当xml文件太大的时候,就没有作用了. 这时候,我找到了两种办法,一个是java,一 ...