Vue3.0配置全局属性

Vue3.0配置全局属性的方法

//main.js
import {
	createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//引入jQuery 模块
import $ from 'jquery';

const app=createApp(App);

app.use(store);
app.use(router);
app.mount('#app');



// 引入axios模块
import Axios from 'axios';
// 配置全局属性
app.config.globalProperties.$axios = Axios;


// 引入接口文档地址
import ApiUrl from './common/common.js'
// 配置全局属性
app.config.globalProperties.$apiUrl=ApiUrl;

Vue3.0配置自动打开网页

1. 在根目录新建一个vue.config.js文件
2. 在文件内写

   module.exports = {
       // 文件vue.config.js配值自动打开浏览器
       devServer: {
           open: true
       }
   }
   

Vue3.0配置jQuery和使用的方式

1. 第一步:下载jQuery包

   npm install jquery –save
   

2. 第二步:在vue.config.js里面配置jQuery

   // 先引入webpack
   const webpack = require("webpack");
   module.exports = {
   	// 再配置 plugins
   	configureWebpack: {
   		plugins: [
   			new webpack.ProvidePlugin({
   				jQuery: "jquery",
   				jquery: "jquery",
   				$: "jquery",
   				"window.jQuery": "jquery"
   			})
   		]
   	},
   };
   

3. 第三步:在main.js里面

   import $ from 'jquery'; //引入jQuery 模块
   

Vue2.x，脚手架4.x配置jQuery方式

1. 下载jQuery包

   npm install jquery –save
   

   注意jquery全小写，下载与node_modules时的下载保持一致，要么全是npm 要么全是cnpm。

2. 当前项目根目录自己创建vue.config.js文件

3. 在vue.config.js里面配置jQuery

   // 先引入webpack
   const webpack = require("webpack");
   module.exports = {
   	// 再配置 plugins
   	configureWebpack: {
   		plugins: [
   			new webpack.ProvidePlugin({
   				jQuery: "jquery",
   				jquery: "jquery",
   				$: "jquery",
   				"window.jQuery": "jquery"
   			})
   		]
   	},
   };
   

4. 在main.js里面 引入

   import $ from 'jquery'; //引入jQuery 模块
   

vue3.x引入element.ui框架

element-plus 一个vue3.x 的element的UI框架

1. 首先安装一个最新的@vue-cli，搭建一个vue3.x的项目

2. 下载模块

   npm i element-plus 
   

3. 将src/plugins/element.ts中内容修改为

   import ElementPlus from 'element-plus'
   import 'element-plus/lib/theme-chalk/index.css'
   
   export default (app,any) => {
     app.use(ElementPlus)
   }
   

4. 在main.js 中全局引入

    /* 引入element-plus框架 */
   import installElementPlus from './plugins/element';
   installElementPlus(app);
   

5. 在文章中引入element中的组件

   <el-button type="primary">主要按钮</el-button>