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 格式
对应次项目文件↓
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>
注意常报错
https://element.eleme.cn/#/zh-CN
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
Font Awesome现在有一个官方的Vue.js组件，可供所有希望在其Vue.js项目中使用我们的图标的人使用。
https://blog.csdn.net/badaaasss/article/details/86129393
https://github.com/rumengkai/awesome-vue
五. web框架-----------VUE初始项目使用和其他库的资料（五）
原文：https://www.cnblogs.com/lovershowtime/p/11664637.html