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文件前的结构)相关推荐

创建Vue项目，找不到router文件（router.js）的解决方法
创建Vue项目,找不到router文件(router.js)的解决方法问题描述: 安装 Vue Router 原因分析: 解决方案: 命令窗口创建使用图形化界面问题描述: 如图所示: 安装 Vu ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
在vue项目中将px自动成rem
第一步: 在vue项目中的src文件夹下面创建一个config文件夹,在里面创建一个rem.js文件第二步:将下面代码复制到rem.js中 // 基准大小 const baseSize = 32 / ...
Vue将echarts数据导出成excel文件
Vue将echarts数据导出成excel文件一.下载vendor插件下载 vendor 文件放置项目的 src 目录下链接:https://pan.baidu.com/s/1XYYQ186zo ...
Vue项目跨域解决方案与 vue.config.js 配置解析
为什么会出现跨域? 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说 ...
vue项目使用hbuildX打包成app
一.打包 1.在vue.config,js中加入 publicPath: './', 配置,防止打包后产生空白页 2.在axios.js中的默认服务器配置直接写服务器名称,在router里面配置路由模 ...
Vue项目使用js-audio-recorder录音及录音文件上传
最近在做的Vue项目里有关于录音和录音文件上传的功能,用到的是一个开源框架js-audio-recorder,官方文档上关于录音.暂停录音等也封装了很多方法,在这里我主要说下录音文件上传部分,网上找了 ...
vue项目使用electron打包成桌面应用
打包流程详情步骤: 1.准备工作: a.win7系统则确保node版本在v12以上,electron-builder对系统或版本有要求: b.项目路径不使用中文: c.使用淘宝镜像命令代替npm管理工 ...
VUE 项目图标全部替换成阿里巴巴矢量图
我们在做vue项目时,发现vue里的图标不能满足我们项目的需求,我们就需要去阿里巴巴矢量图里下载了. 阿里巴巴矢量图库中有两种格式的图标如下图第一个Unicode 样式,vue的使用方法如下第二个 ...

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

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

最新文章

热门文章