當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2023/12/10 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue项目结构(未抽离成.vue文件前的结构) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最終效果

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>vue項目結構</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>這里整塊會被直接替換掉</p></div><template id="App"><div><h1>App根組件</h1><router-link to="/login">登錄</router-link><router-link to="/register">注冊</router-link><router-view></router-view></div></template><template id="login"><div><h1>登錄組件</h1></div></template><template id="register"><div><h1>注冊組件</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('方法的名稱', '按需傳遞唯一的參數')調用boundMutations(state, payload) {console.log(state, payload);}},getters: {// 組件中通過this.$store.getters.***引用getToken(state) {return "加工后的token" + state.token;}},actions: {// 組件中通過this.$store.dispatch('方法的名稱', 按需傳遞唯一的參數)調用async getApiData(context, payload) {console.log(context, payload); // => {commit: {...}, dispatch: {...}, getters: {...}, rootGetters: {...}, rootState: {...}, state: {...}} {name: "actions", age: 20}}}});// // 創建 Vue實例，得到 ViewModel// var vm = new Vue({// el: "#app",// data: {},// methods: {},// render: function(createElements) {// // createElements 是一個方法調用它能夠把指定的組件模板對象渲染為 html 結構// return createElements(App); // 渲染好的模版字符串// // 注意：這里 return 的結果, 會替換頁面中 el 指定的那個容器相當于v-text// }// // 簡寫// render: h => h(App)// });// 實際項目中的結構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"); 相當于el 用于指定控制區域會被render函數渲染好的html結構直接替換掉</script></body> </html>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。