VUE #1 VUE项目安装插件

最新推荐文章于 2024-08-01 08:00:00 发布

FSYML

最新推荐文章于 2024-08-01 08:00:00 发布

阅读量1k

点赞数

分类专栏： # Vue2.0 文章标签： vue

本文链接：https://blog.csdn.net/Molianna/article/details/118854496

版权

Vue2.0 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本篇分为以下几步

一、安装 UI 控件 element-plus （支持 vue3.0）
二、router 路由控件
三、安装 axios 控件（处理网络请求）
四、vuex 安装

直接在 VS CODE 工具下的命令行安装。

一、安装 UI 控件 element-plus （支持 vue3.0）

PS D:\wangs\demo-vue> vue add element-plus
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing vue-cli-plugin-element-plus...

+ vue-cli-plugin-element-plus@0.0.13
added 1 package in 6.344s
✔  Successfully installed plugin: vue-cli-plugin-element-plus

? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? No
? Choose the locale you want to load, the default locale is English (en) zh-cn

🚀  Invoking generator for vue-cli-plugin-element-plus...
📦  Installing additional dependencies...

added 8 packages from 13 contributors in 12.028s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-element-plus
PS D:\wangs\demo-vue>

如下图，则说明 element plus 安装成功。
在这里插入图片描述

二、router 路由控件

router 用来处理 URL 转发和页面跳转。

安装 router 的时候需要注意的是 history mode。router 有两种模式 hash mode 和 history mode，这两个的显著区别就是：hash mode 会在 URL 中加入一个 “#” 号，就像这样：http://localhost:8080/#/about，而 history mode 的 URL 会和真实的请求保持一致，就像这样：http://localhost:8080/about。如果想 URL 看起来更美观，一般在安装的时候选择 history mode。

PS D:\wangs\demo-vue> vue add router
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? No
PS D:\wangs\demo-vue> vue add router

📦  Installing @vue/cli-plugin-router...

+ @vue/cli-plugin-router@4.5.13
updated 1 package in 12.054s
✔  Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

🚀  Invoking generator for @vue/cli-plugin-router...
📦  Installing additional dependencies...

added 2 packages from 1 contributor in 6.44s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-router

router 控件装好之后会自动配置默认路由例子，来看看：

首先会多出在 src 目录下会多出 router\index.js 目录及文件
来看看 index 内容：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

/*
在浏览器访问http://localhost:8081/ 会跳转到 ../views/Home.vue 页面
在浏览器访问http://localhost:8081/about 会跳转到 ../views/About.vue 页面

默认路由表中给的两个例子反映出了路由表的两种配置方式: 
第一种:
首先 import 页面, 如第2行 import Home from '../views/Home.vue'
然后在路由表中配置 component 时直接使用 Home 别名就行

第二种:
首先 不使用 import 导入页面
然后在路由表中配置 component 时直接指定页面的相对路径就行
*/

//默认路由列表
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

//默认路由列表指定配置
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

在 main.js 中引入 router

import { createApp } from 'vue'
import App from './App.vue'
import installElementPlus from './plugins/element'
import router from './router' //引入路由

//这里定义了 App 页面使用路由,那么去 ./App.vue 页面配置路由显示
const app = createApp(App).use(router)
installElementPlus(app)
app.mount('#app')

在 App.vue 中配置路由显示

<template>
  <div id="nav">
    <!-- 路由连接,点击则在下方[路由显示]处显示对应连接内容 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <!-- 路由显示 -->
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

三、安装 axios 控件（处理网络请求）

axios 作用是？可以粗暴的理解为它和 ajax 相似…

PS D:\wangs\demo-vue> vue add axios 

📦  Installing vue-cli-plugin-axios...

+ vue-cli-plugin-axios@0.0.4
added 1 package from 1 contributor in 6.388s
✔  Successfully installed plugin: vue-cli-plugin-axios


🚀  Invoking generator for vue-cli-plugin-axios...
📦  Installing additional dependencies...

added 5 packages from 8 contributors in 6.949s
-  Running completion hooks...error: 'options' is defined but never used (no-unused-vars) at src\plugins\axios.js:42:32:
  40 | );
  41 |
> 42 | Plugin.install = function(Vue, options) {
     |                                ^
  43 |   Vue.axios = _axios;
  44 |   window.axios = _axios;
  45 |   Object.defineProperties(Vue.prototype, {


1 error found.

上面报错了，原因：该项目安装了 eslint 规范。解决方法如下：

在package.json文件中添加如下代码

"rules": {
	"generator-star-spacing": "off",
	"no-tabs":"off",
	"no-unused-vars":"off",
	"no-console":"off",
	"no-irregular-whitespace":"off",
	"no-debugger": "off"
},

保存,然后重启项目。这里注意，运行完项目之后，启动项目会有如下警告：

"export 'default' (imported as 'Vue') was not found in 'vue'

这是因为我的版本是 vue3.0，所以还得修改一下 axios.js 文件：

"use strict";

// import Vue from 'vue'; //这里 需要改为 import { createApp } from 'vue'
import { createApp } from 'vue'
import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {
    // Do something with response data
    return response;
  },
  function(error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

Plugin.install = function(Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

// Vue.use(Plugin) 这里 两个地方需要改

// export default Plugin;

//成如下格式
export default (app) => {
  app.use(Plugin)
}

四、vuex 安装

PS D:\wangs\demo-vue> vue add vuex

📦  Installing @vue/cli-plugin-vuex...

+ @vue/cli-plugin-vuex@4.5.13
updated 1 package in 6.16s   
✔  Successfully installed plugin: @vue/cli-plugin-vuex


🚀  Invoking generator for @vue/cli-plugin-vuex...
📦  Installing additional dependencies...

added 1 package from 1 contributor in 6.244s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-vuex