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>