日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 >

vue项目结构(未抽离成.vue文件前的结构)

發(fā)布時(shí)間：2023/12/10 38 豆豆
生活随笔 收集整理的這篇文章主要介紹了 vue项目结构(未抽离成.vue文件前的结构) 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

最終效果

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>vue項(xiàng)目結(jié)構(gòu)</title><script type="text/javascript" src="./lib/vue-2.4.0.js"></script><script src="./lib/vue-router-3.0.1.js"></script><script src="./lib/vuex.js"></script></head><body><div id="app"><p>這里整塊會(huì)被直接替換掉</p></div><template id="App"><div><h1>App根組件</h1><router-link to="/login">登錄</router-link><router-link to="/register">注冊(cè)</router-link><!-- 一級(jí)路由匹配的占位符 --><router-view></router-view></div></template><template id="login"><div><h1>登錄組件</h1></div></template><template id="register"><div><h1>注冊(cè)組件</h1></div></template><script type="text/javascript">var App = {template: "#App",data() {return {};},methods: {}};var login = {template: "#login",data() {return {};}};var register = {template: "#register",data() {return {};}};var router = new VueRouter({routes: [{ path: "/", redirect: "/login" },{ path: "/login", component: login },{ path: "/register", component: register }],linkActiveClass: "myactive"});var store = new Vuex.Store({state: {// 組件中通過this.$store.state.***引用token: "800a1fdedc2bbac6ef9910a11e9784a4"},mutations: {// 組件中通過this.$store.commit('方法的名稱', '按需傳遞唯一的參數(shù)')調(diào)用boundMutations(state, payload) {console.log(state, payload);}},getters: {// 組件中通過this.$store.getters.***引用getToken(state) {return "加工后的token" + state.token;}},actions: {// 組件中通過this.$store.dispatch('方法的名稱', 按需傳遞唯一的參數(shù))調(diào)用async getApiData(context, payload) {console.log(context, payload); // => {commit: {...}, dispatch: {...}, getters: {...}, rootGetters: {...}, rootState: {...}, state: {...}} {name: "actions", age: 20}}}});// // 創(chuàng)建 Vue實(shí)例，得到 ViewModel// var vm = new Vue({// el: "#app",// data: {},// methods: {},// render: function(createElements) {// // createElements 是一個(gè)方法 調(diào)用它 能夠把指定的 組件模板對(duì)象 渲染為 html 結(jié)構(gòu)// return createElements(App); // 渲染好的模版字符串// // 注意： 這里 return 的結(jié)果, 會(huì)替換頁面中 el 指定的那個(gè)容器 相當(dāng)于v-text// }// // 簡寫// render: h => h(App)// });// 實(shí)際項(xiàng)目中的結(jié)構(gòu)var vm = new Vue({data: {},methods: {},created() {console.log(this.$store.state.token);console.log(this.$store.getters.getToken);this.$store.dispatch("getApiData", { name: "actions", age: 20 });this.$store.commit("boundMutations", { name: "mutations", age: 20 });},router,store,render: h => h(App)}).$mount("#app");// 注意: .$mount("#app"); 相當(dāng)于el 用于指定控制區(qū)域 會(huì)被render函數(shù)渲染好的html結(jié)構(gòu)直接替換掉</script></body> </html>

總結(jié)

以上是生活随笔為你收集整理的vue项目结构(未抽离成.vue文件前的结构)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。