学校网站栏目建设,wordpress内网访问不了,太原seo网站排名,手机app下载官方免费下载安装参考作者#xff1a;https://www.jianshu.com/p/2b661d01eaf8 只是为了方便个人学习。 来看一下脚手架创建后的项目目录 说明#xff1a;在*.vue文件#xff0c;template标签里写html代码#xff0c;且template直接子级只能有一个标签。style标签里写样式#xff0c;scrip…参考作者https://www.jianshu.com/p/2b661d01eaf8 只是为了方便个人学习。 来看一下脚手架创建后的项目目录 说明在*.vue文件template标签里写html代码且template直接子级只能有一个标签。style标签里写样式script里面写js代码 1. main.js 这个js文件是主页面配置的主入口。主要是利用es6的模块化引入模块 1 // The Vue build version to load with the import command2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.3 import Vue from vue /* 这里是引入vue文件 */4 import App from ./App/* 这里是引入同目录下的App.vue模块 */5 import router from ./router/* 这里是引入vue的路由 */6 7 Vue.config.productionTip false8 9 /* eslint-disable no-new */
10 new Vue({
11 el: #app,/* 定义作用范围就是index.html里的id为app的范围内 */
12 router,/* 引入路由 */
13 components: { App },/* 给Vue实例初始一个App组件作为template 相当于默认组件 */
14 template: App//* 注册引入的组件App.vue */
15 }) 2. 文件App.vue 1 template2 div idapp3 img src./assets/logo.png4 router-view/ !-- 这里是用来展示路由页面内容的如果想用跳转就用router-link toxxx/router-link --5 /div6 /template7 8 script9 export default {
10 name: App
11 }
12 /script
13
14 style
15 #app {
16 font-family: Avenir, Helvetica, Arial, sans-serif;
17 -webkit-font-smoothing: antialiased;
18 -moz-osx-font-smoothing: grayscale;
19 text-align: center;
20 color: #2c3e50;
21 margin-top: 60px;
22 }
23 /style 3.Hello.vue页面 1 template2 div classhello3 h1{{ msg }}/h1!-- 这里是展示数据中的 --4 h2Essential Links/h25 ul6 li7 a8 hrefhttps://vuejs.org9 target_blank10 11 Core Docs12 /a13 /li14 li15 a16 hrefhttps://forum.vuejs.org17 target_blank18 19 Forum20 /a21 /li22 li23 a24 hrefhttps://chat.vuejs.org25 target_blank26 27 Community Chat28 /a29 /li30 li31 a32 hrefhttps://twitter.com/vuejs33 target_blank34 35 Twitter36 /a37 /li38 br39 li40 a41 hrefhttp://vuejs-templates.github.io/webpack/42 target_blank43 44 Docs for This Template45 /a46 /li47 /ul48 h2Ecosystem/h249 ul50 li51 a52 hrefhttp://router.vuejs.org/53 target_blank54 55 vue-router56 /a57 /li58 li59 a60 hrefhttp://vuex.vuejs.org/61 target_blank62 63 vuex64 /a65 /li66 li67 a68 hrefhttp://vue-loader.vuejs.org/69 target_blank70 71 vue-loader72 /a73 /li74 li75 a76 hrefhttps://github.com/vuejs/awesome-vue77 target_blank78 79 awesome-vue80 /a81 /li82 /ul83 /div84 /template85 86 script87 export default {88 name: HelloWorld,89 data () {90 /* 这里是数据一定记住数据一定要放data中然后用return返回 */91 return {92 msg: Welcome to Your Vue.js App93 }94 }95 }96 /script97 98 !-- Add scoped attribute to limit CSS to this component only --99 style scoped
100 /* scoped的意思是这里的样式只对当前页面有效不会影响其他页面
101 还有可以设置langscss就是支持css预编译也就是支持sass或者less */
102 h1, h2 {
103 font-weight: normal;
104 }
105 ul {
106 list-style-type: none;
107 padding: 0;
108 }
109 li {
110 display: inline-block;
111 margin: 0 10px;
112 }
113 a {
114 color: #42b983;
115 }
116 /style 4. router文件下的index.js是路由配置 这个是配置路由的页面 1 import Vue from vue //这里是引用vue文件2 import Router from vue-router //这里是引入vu路由模块并赋值给Router3 import HelloWorld from /components/HelloWorld///* 英文Hello.vue模版并赋值给变量Hello,这里是“”相当于“../” */4 5 Vue.use(Router)/* 使用路由 */6 7 export default new Router({8 routes: [/* 进行路由配置规定“/”引入到Hello组件 */9 {
10 path: /,
11 name: HelloWorld,
12 component: HelloWorld/* 注册Hello组件 */
13 }
14 ]
15 }) 如果需要增加组件那就在components文件下定义xx.vue文件并编写代码即可如果需要配置路由就要进行在index.js进行路由“路径”配置 注意import from和export defalut的使用转载于:https://www.cnblogs.com/wanqingcui/p/9747068.html
