欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

构建vue零散笔记

程序员文章站 2022-07-03 18:44:52
# vue项目(用webpack构建)的前提是已安装了node.js,vue,vue-cli,webpack # 主要命令构建:vue init webpack 项目名(纯英文,且不可驼峰)运行:npm run dev打包:npm run build(需要修改配置信息) # element-ui## ......

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