摘要：准备首先删除相关代码和文件下的中的标签中的声明和引用引入一个简单的样式组件库方便书写几个简单组件举例学习目录初始化在目录下新建文件夹在目录下新建四个文件夹在目录下新建文件在目录下新建文件夹用于存放纯性质组件在目录下新建文件在目录下新建文
准备
首先删除vue demo hello vue相关代码和文件
components下的helloworld.vue
app.vue 中的img 标签
router中的helloworld声明和引用
引入一个简单的样式组件库 npm i element-ui -S 方便书写几个简单组件举例学习
目录初始化
在src目录下新建views文件夹
在 assess目录下新建 js、css、font、img四个文件夹
在 css目录下新建 common.css文件
在 components目录下新建 ui文件夹（用于存放纯ui性质组件）
在 ui目录下新建 index.js文件
在views目录下新建viewPage1、viewPage2文件夹及文件夹下的index.vue（实际应用中的两个子页面或者子功能）
在build目录下webpack.base.conf.js文件的alias对象中添加几个属性
"@components": resolve("src/components"),
"@ui": resolve("src/components/ui"),
"@static": resolve("static"),
"@assess": resolve("assess"),
在之后的impotent引用中即可使用@**代替相应较长的目录（webpack构建时会检测替换）
在main.js中引入common.css 和 ui/index.js
import "@assess/css/common.css"
import commonUI from "@ui/index.js"
Vue.use(commonUI)
在main.js中注册element-ui的部分组件
在router中注册这两个子页面
paht：‘/’为page1，即项目首页变成了page1
简单clone一个页面简单复制一下vue指南官网 https://cn.vuejs.org/v2/guide/
很明显该页面布局采用顶栏+左侧边栏布局，很像ui中的Container 布局容器
接下来我们只需要在page1中使用这些样式库中的容器组件即可
接下来还可以在components目录中新建一些组件或者隶属于page1页面自己的子组件在page1目录中新建一个widgets目录下
总之可以自己按照使用element-ui组件的方式自建一些组件试试看
项目中的ESlint代码规范检查还未经过配置，vue官方demo项目每行语句后面的风格都是不加分号，不推荐
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99866.html
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...
阅读 2690·2021-11-08 13:16
阅读 2367·2021-10-18 13:30
阅读 2237·2021-09-27 13:35
阅读 1993·2019-08-30 15:55
阅读 2442·2019-08-30 13:22
阅读 576·2019-08-30 11:24
阅读 2077·2019-08-29 12:33
阅读 1813·2019-08-26 12:10
