相关资源

组件的选择

我们这里选择文档抄起来比较友好的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-基于组件写简单页面-前端网页简历相关推荐

vue中组件在不同页面中渲染出错
vue中组件在不同页面中渲染出错封装了一个组件封装了一个组件遇到问题了,特向各位大佬请教比如我封装了一个 child 组件我在father 页面中引入可以正常使用而且css 样式不会出现 ...
Vue项目部署到云开发前端网页托管｜unicloud版
Vue项目部署到云开发前端网页托管-unicloud版前言创建Vue项目一.检查环境 1.检查`Node`环境 2.检查`Vue`环境二.创建项目 1.项目创建 2.创建成 ...
vue父子组件传值简单了解vuex
一.vue的父子组件之间是如何传值的? 首先呢,需要说说的是,vue既然有双向绑定,那为何会有父子组件之间的传值问题?这个问题也简单,vue的组件会供其他的vue页面进行调用,如果数组都是双向绑定的话 ...
vue 网格组件_简单的Vue组件可显示带有事件的月网格日历
vue 网格组件简洁日历 (vue-simple-calendar) vue-simple-calendar is a flexible, themeable, lightweight event ...
简单的前端网页分享功能怎么做？
分享到某个平台比如说网页上有一个按钮,分享到微博或QQ空间... 就用下面的方式 1.新浪微博 <a href="http://v.t.sina.com.cn/share/share ...
vue中align_Vue的简单Treeview组件，没有额外的依赖——VueTeatree
介绍 Vue Teatree是一个不依赖第三方库的Vue树组件,简单易用! Github https://github.com/sarimabbas/vue-teatree 安装 yarn add v ...
魔法诗~~~一套基于Vue开发的实用、高端、炫酷的响应式前端网页！！！
魔法诗网页源代码获取方式见文章结尾处 1.项目简介魔法诗是一套基于前端开发框架 Vue3 开发的仅包含前端页面的响应式网站,此网页主要是通过静态的页面展示给用户一些炫酷的界面.无论是用在平时学校的 ...
vue使用组件化思想实现一个简单的购物车页面
vue使用组件化思想实现一个简单的购物车页面文章目录 vue使用组件化思想实现一个简单的购物车页面页面预览项目结构组件介绍主页面ShopCar Header组件 Goods组件 Count组 ...
前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件
快速实现基于uQRCode封装简单快速实用全端二维码生成插件; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12677 效果图 ...

Vue-基于组件写简单页面-前端网页简历

安装和引入

安装

引入

完整引入

按需引入

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

按需导入对应模块

在`main.js` 中写入以下内容

简单使用

新建一个Vue页面

给新页面配置路由

查看新页面

修改App.vue

开始抄组件

导入要抄的组件

参照文档抄组件

Vue-基于组件写简单页面-前端网页简历相关推荐

最新文章

热门文章

Vue-基于组件写简单页面-前端网页简历

安装和引入

安装

引入

完整引入

按需引入

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

按需导入对应模块

在main.js 中写入以下内容

简单使用

新建一个Vue页面

给新页面配置路由

查看新页面

修改App.vue

开始抄组件

导入要抄的组件

参照文档抄组件

Vue-基于组件写简单页面-前端网页简历相关推荐

最新文章

热门文章

在`main.js` 中写入以下内容