当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 构建vue零散笔记

构建vue零散笔记

2019年03月29日  | 移动技术网IT编程  | 我要评论

# 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()
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网