构建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变 ...
随机推荐
- bootstrap dialog对话框,完成操作提示框
1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...
- node.js mysql 使用总结
npm install mysql 使用mysql连接池 let mysql = require('mysql'); let db_config = { "connectionLimit&q ...
- python的元组及其书写规矩
1.元组 (1)元组看起来犹如列表,但使用圆括号而不是方括号来标识.定义元组后,就可以使用索引来访问其元素,就像访问列表元素一样. (2)元组的元素不可修改,但是可以赋值. 2.规矩 (1)缩进:建议 ...
- uva 10635 LCS转LIS
这道题两个数组都没有重复的数字,用lcs的nlogn再适合不过了 #include <iostream> #include <string> #include <cstr ...
- web应用和http协议
一.web应用 Web应用程序是一种可以通过Web访问的应用程序: 程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件. 应用程序有两种模式C/S.B/S. 1.C/ ...
- 数据访问层 (DAO)
数据持久化 持久化:将程序中的数据在瞬间状态下和持久状态间转换的机制(JDBC) 主要持久化操作:保存.删除.读取.和查找. 采用面向接口编程,可以降低代码间的耦合性,提高代码的可扩展性和可维护性. ...
- ArcGIS for Server使用AD中的用户配置
ArcGIS for Server使用AD中的用户配置 1.概述 默认情况下,ArcGIS Server使用内置存储模式来管理用户和角色.该模式使用基于文件格式来存储信息.当然,ArcGIS Serv ...
- python 函数,内置函数
1.函数 1.1 定义函数 ·函数代码块以 def 关键词开头,后接函数标识符名称和圆括号 (). ·任何传入参数和自变量必须放在圆括号中间,圆括号之间可以用于定义参数. ·函数的第一行语句可以选择性 ...
- windows常用命令集锦
开始→运行→输入的命令集锦 gpedit.msc-----组策略 sndrec32-------录音机 Nslookup-------IP地址侦测器 explorer-------打开资源管理器 lo ...
- solidity语言6
映射 可以认为是哈希,格式 mapping(_KeyType => _ValueType) pragma solidity ^0.4.0; contract MappingExample { m ...