四川省红鱼洞水库建设管理网站,万柳网站建设,分享设计作品网站,精仿腾讯3366小游戏门户网站源码织梦最新内核带全部数据!目录结构
以下文件均为npm create helloworld自动生成的文件目录结构
目录截图 目录说明
目录/文件说明node_modulesnpm 加载的项目依赖模块src这里是我们要开发的目录#xff0c;基本上要做的事情都在这个目录里assets放置一些图片#xff0c;如logo等。componentsvue组件…目录结构
以下文件均为npm create helloworld自动生成的文件目录结构
目录截图 目录说明
目录/文件说明node_modulesnpm 加载的项目依赖模块src这里是我们要开发的目录基本上要做的事情都在这个目录里assets放置一些图片如logo等。componentsvue组件文件的存放目录,也是主要的工作目录App.vue项目入口文件我们也可以直接将组件写这里而不使用 components 目录。main.js项目的核心文件。index.html首页入口文件你可以添加一些 meta 信息或统计代码啥的。package.json项目配置文件。README.md项目的说明文档markdown 格式
文件说明
index.html:启动页面 div idapp为后续的vue文件提供可替换的壳标签 !DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbodynoscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --/body
/html
main.js:入口文件类似于java的main方法
功能有两个 1、导入vue框架 2、将App.vue的内容挂载(替换)到index.html的div idapp/标签 import { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)
App.vue第一个vue文件
!-- 一、Vue的文件结构为三段式1.template负责页面元素搭建2.script负责js代码3.style负责css样式二、使用其他的vue组件分两步1.导入1.1在js方法中import组件1.2在export default中使用components注册组件2.使用在template中使用组件标签
--
templateimg altVue logo src./assets/logo.pngHelloWorld msgWelcome to Your Vue.js App/ !-- 在template中使用组件标签 --
/templatescript
import HelloWorld from ./components/HelloWorld.vue // 在js方法中import组件export default {name: App,components: {HelloWorld // 在export default中使用components注册组件}
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
HelloWorld.vue: 展示页面
msg是定义好的参数外部组件(App.vue)可以通过参数传递的方式将数据传给HelloWorld.vue
templatediv classhelloh1{{ msg }}/h1pFor a guide and recipes on how to configure / customize this project,brcheck out thea hrefhttps://cli.vuejs.org target_blank relnoopenervue-cli documentation/a./p/div
/templatescript
export default {name: HelloWorld,props: {msg: String}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
/style
