下載安裝node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共組件
一、引入elementUi 順便一提axios使用說明 和axios在vue中使用
二、準備靜態資源
三、封裝.vue公共組件
四、封裝.js公共組件
五、封裝公共的js代碼
六、封裝全局的filter、directive等

---

一、引入elementUi

elementUI官網

1. 安裝：npm i element-ui -S
2. 在 main.js 中引入：

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI);

二、準備靜態資源

如下圖在 public 文件夾下新增，在 public 下的 index.html 中引入

三、封裝.vue公共組件

（這里以公共的 header 為例）

注冊組件： 在 src 文件夾下的 components 文件夾下新增一個 header 文件夾，并在該文件夾下新增 index.vue。這個 index.vue 用來寫公共組件的靜態頁面；
建議給每個頁面加上 name ，這樣可以在vue的工具上可以查看到，方便調試。

引入： import引入資源，components注冊，

4. 上面圖中”管理系統"是定死的，若想每次顯示不同，則用父子通訊 props 屬性使用動態數據。

使用方法：

四、封裝.js公共組件

準備工作： 在 components 文件夾中 新建一個 Js 文件夾 以及 index.js 文件（這里的 index.js 用來作為 js 組件的集合頁），再新建一個你所需要的 js 文件夾并在該文件夾下新建 index.vue 文件，如 MessageBox.

書寫樣式： 在index.vue 中書寫樣式

代碼：

<template><div class="message-box"><h2>定位</h2><p>北京</p><div><div>取消</div><div>切換定位</div></div></div> </template><script> export default {name:"messageBox" } </script><style scoped lang="scss">.message-box{width: 200px;height: 140px;border: 1px solid #ccc;border-radius: 4px;background: #fff;box-shadow: 3px 3px 3px 3px #ccc;position: absolute;left: 50%;top: 50%;margin: -200px 0 0 -100px;z-index:1;h2{text-align: center;line-height: 48px;font-size: 18px;}p{text-align: center;line-height: 40px;}>div{display: flex;position: absolute;bottom:0;width: 100%;border-top:1px #ccc solid;div{flex:1;text-align: center;line-height: 30px;border-right: 1px #ccc solid;}div:last-child{border:0;}}} </style>

查看效果： 現在任意一個頁面中注冊使用進行查看

效果：

3. js 代碼，在 index.js 中完成

import Vue from "vue"; import MessageBox from "./MessageBox";export var messageBox = (function(){ //記住這個messageBox，后面將會調用var defaults = { //默認值title : "", //對應 index.vue 中的定位content : "", //對應 index.vue 中的北京cancel : "", //對應 index.vue 中的取消ok : "", //對應 index.vue 中的切換handleCancel : null, //對應 index.vue 中的取消方法 用null 或者 空函數handleOk : null //對應 index.vue 中的切換方法 用null 或者 空函數};var MyComponent = Vue.extend(MessageBox);return function(opts){ //配置參數(返回調用時的配置參數)for(var attr in opts){defaults[attr] = opts[attr]; //覆蓋默認配置}var vm = new MyComponent({el : document.createElement("div"),//作為容器裝 index.vue ，此div不會在頁面中渲染出來data : {title : defaults.title,content : defaults.content,cancel : defaults.cancel,ok : defaults.ok},methods : {handleCancel(){// 判斷defaults.handleCancel是否存在，若存在，則是defaults中的null// 若不存在，執行 && 后的defaults.handleCancel,要拿到組件中的vm對象，所以用到call//不用bind,用bind直接改變了bind指向defaults.handleCancel && defaults.handleCancel.call(this);document.body.removeChild( vm.$el ); //點擊完后刪掉彈框},handleOk(){defaults.handleOk && defaults.handleOk.call(this);document.body.removeChild( vm.$el ); //點擊完后刪掉彈框}}});document.body.appendChild( vm.$el );}; })();

記得修改 index.vue 中的字段，讓它變成動態的

4. 使用

顯示結果：

五、封裝公共的js代碼

方法一：

我在 pulic 文件夾下 新建了一個 js 文件夾，里面用來放公共的 js 代碼。

寫 js 代碼，記得要 export dafult {} 導出，如果用到了 axios 等方法或其他插件，記得要 import 這些插件。例如：

import axios from 'axios'; import ElementUI from 'element-ui';function getProcess(typeCode){console.log(1)axios.get('/api/temp/getParams?typeCode='+typeCode).then(res => { console.log(res)if( res.status == 200){ }}) .catch(err =>{this.$message.error('服務器響應失敗');console.log(err);}) };export default {getProcess }

注意：在這里不要用 this ，否則會報錯

3. 在 main.js 中引入，并在原型的身上掛載

import commonJS from '../public/js' Vue.prototype.commonJS = commonJS;

使用時，this.原型上掛載的名稱.方法名。例如：

this.commonJS.getProcess("0001");

方法二：

在 public 下新建一個 js 文件夾， js 文件下新建一個 index.js 文件用來寫公共的 js 代碼。

例如封裝一個彈框的 js 代碼:

import {MessageBox} from 'element-ui';function handleConfirm(text = "確定執行此操作嗎", type='warning'){// 這里 export后面不加 default，引用時：import {方法名} from js文件地址// export后加 default，引用時：import 方法名 from js文件地址// 通過export方式導出，在導入時要加{ }，export default則不需要return MessageBox.confirm(text, '提示',{confirmButtonText: '確定',cancelButtonText: '取消',type: type}) }export {handleConfirm}

組件中使用

import {handleConfirm} from '../../../public/js'methods:{signout(){handleConfirm('確認退出登錄嗎？','warning').then(res => {this.$router.push('/login');}).catch(err =>{console.log('err',err)})} }

六、封裝全局的filter、directive等

在 components 文件夾下新建一個 myVue 文件夾，再在這個新建的文件夾下新建 index.js。
1. 簡單舉例，在index.js 中寫：

import Vue from 'vue';Vue.directive('color', (el,binding){console.log(el);el.style.coloe = binding.value || '#fff'; })

2. 在 main.js 中注冊： import '@/components/myVue';

3. 使用： 直接在需要的頁面上使用即可。

---

上一篇：創建vue項目(一)搭建vue-cli、項目文件介紹、簡單配置
下一篇：路由跳轉…

總結

以上是生活随笔為你收集整理的创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件（.vue，js代码等）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。