构建vue零散笔记
# vue项目(用webpack构建)的前提是已安装了node.js,vue,vue-cli,webpack
# 主要命令
构建:vue init webpack 项目名(纯英文,且不可驼峰)
运行:npm run dev
打包:npm run build(需要修改配置信息)
# element-ui
## 安装:npm i element-ui -S
## 引用:在main.js中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
## 按需引入:
## 安装 babel-plugin-component
npm install babel-plugin-component -D
## .babelrc 修改为
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
## 使用
import { Button, Select } from 'element-ui'
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
# axios
## 安装
npm install axios
## 使用 main.js里
import axios from 'axios'
Vue.prototype.$axios = axios
## 调用
this.$axios.(略)
# vuex
## 安装
npm install vuex --save
## main.js里
import Vuex from 'vuex'
Vue.use(Vuex)
## 使用
参考腾讯视频vue教程
mutations与actions 如果是静态的全部变量用mutations即可,如果需要从接口获取,则需用actions(未测试)
## 获取变量
this.$store.state.变量名
## 修改变量
this.$store.commit('方法名')(可带参数 mutations情况下)
his.$store.dispatch('方法名') (可带参数 actions情况下)
# 激活状态 路由配置里
linkActiveClass:'is-active'
# 路由跳转
this.$router.push({name:'master',params:{id:'参数'}});
name和params搭配,刷新的话,参数会消失
this.$router.push({path:'/master',query:{id:'参数'}});
path和query搭配,刷新页面的话,url中的参数不会丢失,query中的参数成了url中的一部分
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
# 路由获取参数
this.$route.query.参数名
this.$route.params.参数名
watch:{
'$route'(to,from){
}
}
# 路由钩子
全局
router.beforeEach((to, from, next) => {
next()
})
局部
beforeRouteEnter:(to,from,next)=>{
return next()
}
构建vue零散笔记的更多相关文章
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- 自动化工具构建vue项目
其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记.但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法.就算是在实际项 ...
- Vue:实践学习笔记(1)——快速使用
Vue:实践学习笔记(1)——快速使用 Vue基础知识 0.引入Vue 官方地址:Vue的官方下载地址 Vue推荐博客:keepfool 在你的程序中快速引入Vue: <!-- 开发环境版本,包 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- Vue学习笔记-vue-element-admin 前端学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- vue-cli快速构建Vue项目
vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
随机推荐
- ThenJS
安装ThenJs: npm i thenjs 史上最快,与 node callback 完美结合的异步流程控制库 <!doctype html> <html lang=" ...
- Apache Flume
An Event is a unit of data that flows through a Flume agent. The Event flows from Source to Channel ...
- c 结构体中的变长数组
在Linux系统里,/usr/include/linux/if_pppox.h里面有这样一个结构: struct pppoe_tag { __u16 tag_type; __u16 tag_len; ...
- 在linux环境下搭建java web测试环境(非常详细!)
一.项目必备软件及基本思路 项目必备:虚拟机:VMware Workstation (已安装linux的 CentOS6.5版本) 项目:java web项目 (必须在本地部署编译后选择项目的webR ...
- 保存及读取keras模型参数
转自:http://blog.csdn.net/u010159842/article/details/54407745,感谢分享~ 你可以使用model.save(filepath)将Keras模型和 ...
- Tomcat 数据源的原理、配置、使用
1.数据源的作用及操作原理 在程序代码中使用数据源是可以提升操作性能的,这种性能的提升依靠于运行的原理. 传统JDBC操作步骤 1.加载数据库驱动程序,数据库驱动程序通过CLASSPATH配置: 2. ...
- ahp层次分析法软件
http://www.jz5u.com/Soft/trade/Other/58808.html 权重计算 归一化 本组当前数 - 本组最小 / 本组最大-本组最小 http://blog.csdn.n ...
- ORACLE_TRIGGER
PL/SQL TRIGGER Statement PL/SQL TRIGGER Statement The trigger statemet is a especially stored proce ...
- 实验,暂停oracle后台进程
有时出于测试需求,需要暂停oracle的某些后台进程,此时以暂停lgwr进程为例 使用sysdba连接到数据库查询到LGWR进程的PID:SQL> select prc.pid from v$b ...
- May 14th 2017 Week 20th Sunday
A smooth sea never made a skillful mariner. 平静的海洋练不出熟练的水手. A smooth sea never made a skillful marine ...