VUE2脚手架创建及基础框架搭建

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(‘方法名’)