五. web框架-----------VUE初始项目使用和其他库的资料(五)

一 VUE初始项目使用

1 .vue项目文件说明

https://blog.csdn.net/toBetterMe/article/details/88744241          vue-cli项目的目录结构介绍

目录/文件           说明
build               项目构建(webpack)相关代码
config              配置目录,包括端口号等。我们初学可以使用默认的。
node_modules        npm 加载的项目依赖模块

src                 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
assets:             放置一些图片,如logo等。
components:         目录里面放了一个组件文件,可以不用。
App.vue:            项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
main.js:            项目的核心文件。

static              静态资源目录,如图片、字体等。
test                初始测试目录,可删除
.xxxx文件            这些是一些配置文件,包括语法配置,git配置等。
index.html          首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json        项目配置文件。
README.md           项目的说明文档,markdown 格式


 2.自己创建的项目

  对应次项目文件↓
Vcontent.vue

<template> <div class="warp"> <h1>我是内容</h1> 这是content哈哈哈 <br> {{msg}} </div> </template> <script> //页面的业务逻辑 export default { name: 'Vcontent', data () { return { msg: '这是content欢迎啦啦啦' } } } </script> <style scoped> h1{ color: red; } .warp{ height: 200px; width: 800px; background-color: burlywood; } </style>
Vheader.vue

<!--页面结构--> <template> <header class="nav"> <h1>我是头部</h1> 这是hearer哈哈哈 <br> {{msg}} </header> </template> <!--页面逻辑--> <script> export default { name: 'Vheader', data () { return { msg: '这是hearer欢迎啦啦啦啦啦' } } } </script> <!--页面样式--> <!--scoped 这个属性表示对当前主组样式起作用--> <style scoped> h1{ color: brown; } .nav{ width: 600px; height: 200px; background-color: cyan; } </style>
Vfooter.vue

<template> <footer class="footer"> <h1>我是底部</h1> 这是footer哈哈哈 <br> {{msg}} </footer> </template> <script> export default { name: 'Vfooter', data () { return { msg: '这是footer欢迎啦啦啦' } } } </script> <style scoped> h1{ color: blue; } .footer{ height: 150px; width: 500px; background-color: yellow; } </style>

 

App.vue

<template> <div class="app"> <!--页面的结构--> 页面的结构!!!!!!!!!!!!! <br /> <h1> {{msg}}</h1> <br /> <Vheader></Vheader> <Vcontent></Vcontent> <Vfooter></Vfooter> </div> </template> <script> //引入子外部组件 import Vheader from './components/Vheader.vue' import Vcontent from './components/Vcontent.vue' import Vfooter from './components/Vfooter.vue' //页面的业务逻辑 export default { name: 'app', data () { return { msg: '根组件' } },methods:{ }, computed:{ //计算属性 }, //组件图 挂载 components:{ // 挂载 外部引入来的组件 Vheader, Vcontent, Vfooter, } } </script> <!--scoped 这个属性表示对当前主组样式起作用--> <style scoped> h1{ color: peru; } .app{ width: 1500px; height: 100px; background-color: plum; } body{ margin: 0; padding: 0; } </style>
注意常报错

 2. Element 网站快速成型工具

https://element.eleme.cn/#/zh-CN

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

3 .vue  Font Awesome    图标字体

https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

Font Awesome现在有一个官方的Vue.js组件,可供所有希望在其Vue.js项目中使用我们的图标的人使用。

 

4 .vue资源精选-前端组件库资源-前端选型 资源库

                  http://vue.awesometiny.com/  

 

5 .Vue开源项目汇总(史上最全)

              https://blog.csdn.net/badaaasss/article/details/86129393

             https://github.com/rumengkai/awesome-vue 

 

猜你喜欢

转载自www.cnblogs.com/lovershowtime/p/11664637.html
今日推荐