佛山新网站建设价格,黄冈网站推广收费标准,小工具文本wordpress,辽宁网站建设哪里好文章目录 vue项目结构vue请求页面执行流程main.jsrouterHelloWorld.vueApp.vueindex.html vue项目结构
config目录存放的是配置文件#xff0c;比如index.js可以配置端口 node_modules存放的是该项目依赖的模块#xff0c;这些依赖的模块在package.json中指定 src目录分析 1… 文章目录 vue项目结构vue请求页面执行流程main.jsrouterHelloWorld.vueApp.vueindex.html vue项目结构
config目录存放的是配置文件比如index.js可以配置端口 node_modules存放的是该项目依赖的模块这些依赖的模块在package.json中指定 src目录分析 1.assets目录存放资源比如图片、js 2.components目录存放自定义组件 3.router目录存放的是路由文件 4.App.vue文件是项目的主体单页这里显示路由视图 5.main.js核心文件入口js这里创建vue实例并且指定elroutercomponenttemplate
index.html是项目首页 这里定义了一个div idapp
package.json指定项目依赖的模块类似java maven项目的pom.xml
vue请求页面执行流程
HelloWorld.vue index.js App.vue main.js index.html
main.js
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from vue
import App from ./App
import router from ./routerVue.config.productionTip false/* eslint-disable no-new */
new Vue({el: #app,router,components: { App },template: App/
})
main.js解读 1.入口js 2.创建了vue实例 3.指定了el 挂载到idapp的div 4.指定router 从router目录引入 5.指定components引入组件该组件是import App 6.指定template:App/ 这里App是从components {App} 7.进入路由找到路由文件 router/index.js同时得到url http://localhost:8080/#/ 得到path /
router
import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorldVue.use(Router)export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld}]
})
router/index.js解读 1.创建Router对象 当作的组件 2.routes:[] 路由表可以指定多个路由就是一个访问路径 3.请求url http://localhost:8080/#/ 得到 path / 4.对应找到 component:HelloWorld.vue
HelloWorld.vue
templatediv classhelloh1{{ msg }}/h1h2Essential Links/h2ulliahrefhttps://vuejs.orgtarget_blankCore Docs/a/liliahrefhttps://forum.vuejs.orgtarget_blankForum/a/liliahrefhttps://chat.vuejs.orgtarget_blankCommunity Chat/a/liliahrefhttps://twitter.com/vuejstarget_blankTwitter/a/librliahrefhttp://vuejs-templates.github.io/webpack/target_blankDocs for This Template/a/li/ulh2Ecosystem/h2ulliahrefhttp://router.vuejs.org/target_blankvue-router/a/liliahrefhttp://vuex.vuejs.org/target_blankvuex/a/liliahrefhttp://vue-loader.vuejs.org/target_blankvue-loader/a/liliahrefhttps://github.com/vuejs/awesome-vuetarget_blankawesome-vue/a/li/ul/div
/templatescript
export default {name: HelloWorld,data () {return {msg: Welcome to Your Vue.js App}}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
/style
components/HelloWorld.vue解读 1.自定义组件 2.可以显示页面 3.进行编译得到视图 4.将编译后的视图/页面返回
App.vue
templatediv idappimg src./assets/logo.pngrouter-view//div
/templatescript
export default {name: App
}
/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
App.vue解读 1.项目的主体单页 2.引入router-view/ 3.就可以显示路由后的页面/视图
index.html
!DOCTYPE html
htmlheadmeta charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1.0titlevue_project_quickstart/title/headbodydiv idapp/div!-- built files will be auto injected --/body
/html
index.html 1.是项目首页 2.定义了div id app 3.当vue实例创建好并渲染好后就会挂载到div 4.用户就看到了最后的效果
