VUE2脚手架创建项目以及常用模块安装
包含:router、element ui、VUEX、axios等
一、脚手架搭建项目
1、全局安装脚手架(若已安装则跳过该步骤)
npm install -g @vue/cli
2、创建项目
vue create +项目名称
后面就不停下一步,选择就完事儿了
3、进入项目
cd 项目目录
4、运行项目
npm run serve
二、router 路由的安装和配置
1、路由安装
打开项目下 package.json文件,查看 vue 版本。
vue 版本为 2.x,建议 vue-router 安装 3.x 版本。
vue 版本为 3.x,建议 vue-router 安装 4.x 版本。
npm install vue-router@3
or
npm install vue-router@4
2、创建router配置文件
创建一个router文件夹 ,文件中创建一个index.js的文件 修改配置信息
import Vue from 'vue' //引入vue js是一个vue的配置文件 vue版本是2.6
import Router from 'vue-router' //vue-router 安装的对象 npm install vue-router@"3.0.1"
import VueRouter from "vue-router";
import Index from "../views/Index" //组件 components
import User from "../views/user"
//vue中使用Router
Vue.use(Router)
const routers =[ //配置router与组件之间的对应关系
{
path: '/',
component: Index,
name: 'index',
},
]
//创建一个vue-router实例对象
const router =new VueRouter({
mode:"history",//history 不带#号 hash 带#号
routes:routers //所有的路由数组
})
//导出路由对象 使用路由的地方引入即可 一般在入口main.js中使用
export default router;
3、在入口main.js中引入vue-router
import Vue from 'vue'
import App from './App.vue'
import Router from "./router/index";// 1、引入配置好的router
/**
* 项目的入口
* @type {boolean}
*/
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router:Router //2、申明router
}).$mount('#app')
4、在vue项目中使用vue-router 在App.vue文件中
<template>
<div id="app">
<router-view></router-view> <!--根据路由更换的组件放在了router-view中,实现页面的跳转-->
</div>
</template>
5、页面跳转
this.$router.push("url") //url:路由的地址 在<script></script>中跳转
<router-link to="url">模板中跳转</router-link> <!--url:路由的地址 <template></template>--中跳转
6、解决运行报错
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false
})
三、嵌套路由
1、子路由配置
在
index.js
中的
routers
添加
children
属性
//eg:
import First from "../views/First.vue"
import Second from "../views/Second.vue"
const routers =[ //配置router与组件之间的对应关系
{
path: '/',
component: Index,
name: 'index',
children :[
{
path:'/first',
component: First,
name :'first'
},
{
path:'/second',
component: Second,
name :'second'
}
]
}
]
2、创建VUE路由文件
3、路由跳转
this.$router.push(url);
// url 为1)中path地址
四、引入 element ui 组件库
1、安装element ui
npm i element-ui
2、在main.js 中引入并使用
// 引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI的所有样式
import 'element-ui/lib/theme-chalk/index.css';
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用ElementUI
Vue.use(ElementUI)
new Vue({
render: h => h(App),
}).$mount('#app')
五、VUE2中使用axios
1、安装
npm install axios
2、在axios文件夹中创建js文件导出方法
import axios from 'axios';
//统一请求路径
let base = 'http://localhost:8080'
export const getRequest = (url, params) => {
return axios({
method: 'get',
url: base + url,
params: params
})
}
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: base + url,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'content-Type': 'application/x-www-form-urlencoded'
}
})
}
3、入口文件main.js中引入
import {
getRequest,
postRequest
} from './libs/api.js'
Vue.prototype.getRequest = getRequest
Vue.prototype.postRequest = postRequest //注入到Vue对象
4、使用axios
created() {
this.getRequest('/static/test.json').then(res => {
console.log(res.data.key)
//赋值
})
}
六、VUEX的引入和使用
1、安装vuex(VUE2使用VUEX的版本3)
npm i vuex@3
2、新建store文件夹,里边放置index.js,引入,使用,配置,注册,导出
import Vue from "vue"
import Vuex from "vuex" //引入vuex
Vue.use(Vuex) //使用vuex
export default new Vuex.Store({
state:{
num:"我是store中的数据",//实现参数传递的
},
mutations:{
},
actions:{
},
modules:{
}
})
3、在main根上引入以上文件夹,并注册
import Vue from "vue";
import App from "./App";
import store from "./store/index.js" //引入你新建的store文件
Vue.config.productionTip=false;
new Vue({
el:"#app",
store, //在根上注册store
render:h=>h(App)
})
1、state: 存放数据
使用:this.$store.state.属性名
2、getters: vuex的计算属性, 依赖state中的一个值或多个值产生一个新值, 依赖值发生变化, getters中的方法返回值也会变化
使用: this.$getters.方法名 注意不用带括号
3、mutations: 规定修改vuex中的数据的唯一途径
使用: this.$store.commit(‘方法名’, 实参)
4、actions: 用于做一些异步操作的,但是它要修改state数据还得通过mutations
使用: this.$store.dispatch(‘方法名’)
版权归原作者 l1002670137 所有, 如有侵权,请联系我们删除。