相關資源

組件的選擇

我們這里選擇文檔抄起來比較友好的ElementUI。

當然，后面可以根據需要去選擇其他的組件：適用于移動端的組件庫vux、加錢就能更專業的iviewui、老版本iview等等。

---

安裝和引入

安裝

npm i element-ui -S或者選擇直接在vue ui初始化項目的時候安裝element插件。

引入

完整引入

在 main.js 中寫入以下內容：

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App) });

以上代碼便完成了 Element 的引入。需要注意的是，樣式文件需要單獨引入。

按需引入

安裝 babel-plugin-component （好像可以不裝）

npm install babel-plugin-component -D

按需導入對應模塊

在src\plugins\element.js文件（創建并寫入）

import Vue from 'vue' import 'element-ui/lib/theme-chalk/index.css' // 按需要導入模塊 import {Card } from 'element-ui'// 聲明使用對應模塊 Vue.use(Card)

具體用得到的組件如何引入可以參考官方文檔

在main.js 中寫入以下內容

import Vue from 'vue' import App from './App.vue' import './registerServiceWorker' import router from './router' import store from './store' // 完整引入 // import ElementUI from 'element-ui' // import 'element-ui/lib/theme-chalk/index.css' // 完整引入ElementUI聲明使用 // Vue.use(ElementUI)// 部分引入 import './plugins/element.js'Vue.config.productionTip = false new Vue({router,store,render: h => h(App) }).$mount('#app')

---

簡單使用

新建一個Vue頁面

src\views\Newpage.vue

一個vue頁面包括三個部分：

• template 寫頁面標簽元素，使用組件，兼容html語法
• script 寫數據、邏輯、函數等，詳解說明
• style 寫頁面樣式，寬度間距顏色等……

<template><div class="newpage">新頁面</div> </template><script> export default {data () {return {}} } </script><style lang="scss" scoped> // 使用CSS預處理器scoped讓樣式只在局部頁面生效 </style>

給新頁面配置路由

src\router\index.js

const Newpage = () => import(/* webpackChunkName: "newpage" */ '../views/Newpage.vue')const routes = [{ path: '/newpage', name: 'Newpage', component: Newpage }]

查看新頁面

修改App.vue

可以看到頁面上還有 Home | About 字樣，因為所有的頁面入口在App.vue文件還沒修改

修改src\App.vue如下，相當于清空入口頁面

<template><div id="app"><!-- 路由占位符 --><router-view /></div> </template><style> </style>

開始抄組件

導入要抄的組件

這里先寫個頭像

// 按需要導入模塊 import {Avatar } from 'element-ui'// 聲明使用對應模塊 Vue.use(Avatar)

參照文檔抄組件

<template><div class="newpage"><!-- 新頁面 --><div class="block"><el-avatar shape="square" :size="200" :src="squareUrl"></el-avatar></div></div> </template><script> export default {data () {return {squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'}} } </script><style lang="scss" scoped> // 使用CSS預處理器 scoped讓樣式只在局部頁面生效 </style>

總結

以上是生活随笔為你收集整理的Vue-基于组件写简单页面-前端网页简历的全部內容，希望文章能夠幫你解決所遇到的問題。

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