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

最新推荐文章于 2024-05-02 18:48:26 发布

web_blog

最新推荐文章于 2024-05-02 18:48:26 发布

阅读量136

点赞数

分类专栏： vue javascript

本文链接：https://blog.csdn.net/qq_43248623/article/details/107018176

版权

vue 同时被 2 个专栏收录

60 篇文章 0 订阅

订阅专栏

javascript

51 篇文章 0 订阅

订阅专栏

最终效果
在这里插入图片描述

<!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>