相關(guān)資源

組件的選擇

我們這里選擇文檔抄起來(lái)比較友好的ElementUI。

當(dāng)然，后面可以根據(jù)需要去選擇其他的組件：適用于移動(dòng)端的組件庫(kù)vux、加錢就能更專業(yè)的iviewui、老版本iview等等。

---

安裝和引入

安裝

npm i element-ui -S或者選擇直接在vue ui初始化項(xiàng)目的時(shí)候安裝element插件。

引入

完整引入

在 main.js 中寫入以下內(nèi)容：

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 的引入。需要注意的是，樣式文件需要單獨(dú)引入。

按需引入

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

npm install babel-plugin-component -D

按需導(dǎo)入對(duì)應(yīng)模塊

在src\plugins\element.js文件（創(chuàng)建并寫入）

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

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

在main.js 中寫入以下內(nèi)容

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')

---

簡(jiǎn)單使用

新建一個(gè)Vue頁(yè)面

src\views\Newpage.vue

一個(gè)vue頁(yè)面包括三個(gè)部分：

• template 寫頁(yè)面標(biāo)簽元素，使用組件，兼容html語(yǔ)法
• script 寫數(shù)據(jù)、邏輯、函數(shù)等，詳解說(shuō)明
• style 寫頁(yè)面樣式，寬度間距顏色等……

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

給新頁(yè)面配置路由

src\router\index.js

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

查看新頁(yè)面

修改App.vue

可以看到頁(yè)面上還有 Home | About 字樣，因?yàn)樗械捻?yè)面入口在App.vue文件還沒修改

修改src\App.vue如下，相當(dāng)于清空入口頁(yè)面

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

開始抄組件

導(dǎo)入要抄的組件

這里先寫個(gè)頭像

// 按需要導(dǎo)入模塊 import {Avatar } from 'element-ui'// 聲明使用對(duì)應(yīng)模塊 Vue.use(Avatar)

參照文檔抄組件

<template><div class="newpage"><!-- 新頁(yè)面 --><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預(yù)處理器 scoped讓樣式只在局部頁(yè)面生效 </style>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。