the_technology_practice
(注：主要目的在于拆解大佬项目，尽最大限度的收归己用。记录下自己在开发过程中遇到的问题，在该项目中进行复现、总结、积累、储备新技术、新的技术点。)
该项目目前在GitHub、Coding有相应代码仓库，如果想看到全部代码，请关注下方公众号或添加个人微信获得权限，共同进步哈，在每周末闲暇时间会做更新，目前界面较少，基本功能框架已搭建完毕，Router、Vuex、Axios、I18n等均已配置，目前有登录页、欢迎页、测试侧边导航栏、顶部导航栏预留、animate.css使用等，具体内容如何建设思考ing。
用于实践各种技术、知识点。即认知盲区的排除之用。基于vue-cli3.0以及vuetify框架搭建该项目。（在开发过程中，混入了element框架，目前未发现不合理之处，目前思路，在该系统内依靠element与vuetify搭建两套方案）
vue/cli脚手架工具：
通过@vue/cli + @vue/cli-service-gloabal 快速开始零配置原型开发。
查阅资料
vuetify官方文档：vuetify官方文档
vue-cli官方文档：vue-cli官方文档
项目创建过程记录：
-
全局安装 @vue/cli
npm install -g @vue/cli （全局安装最新版本 v4.0.5） a. 是否使用了国内的淘宝镜像 cnpm ，未确定（安装过程较为缓慢，二十分钟左右，下次尝试 cnpm install -g @vue/cli，切换为淘宝镜像源后好了）。 -
通过 vue create + '项目名' 来创建项目
a.选择babel、eslint项（后面再处理eslint配置，十分钟左右），项目初始化成功。 b.键入命令 vue --version 查看版本。 c.安装vuetify框架（1.命令安装 vue add vuetify，2.Vue UI可视化终端安装。本次选用第二种方式。） i. 键入命令 vue ui ii. 安装 vue-cli-plugin-vuetify 插件（同时安装 vue-router vuex） 项目启动后无热更新功能（百度得知，重新安装vue/cli）
router.js里的children必须为数组 [].
-
v-snotify使用注意事项：
a. npm 安装该组件 b. 在main.js里注册引用 c. 在主vue界面插入组件模板 <vue-snotify></vue-snotify> d. 使用：this.$snotify.success(""); 官方文档：（[v-snotify详细说明](https://artemsky.github.io/vue-snotify/documentation/installation.html "v-snotify详细说明")） -
粒子特效插件 vue-particles('详见登录界面')
a.npm安装插件 npm install vue-particles --save-dev b.在main.js中使用 import VueParticles from 'vue-particles' Vue.use(VueParticles) -
代码片段植入-------------------使用vscode-ide自定义vue组件的模板，快速新建单页面.vue文件结构
a. 在ide中 选择 ‘文件’ -> ‘首选项’ -> ‘用户代码片段’ b. 此时会弹出一个搜索框，然后输入vue，回车，就会进入一个名为‘vue.json’的文件 c. 将以下代码 复制 粘贴后 ok.. (代码片段详见 ‘the_technology_practice\src\assets\Snippets\TheCodeExample\TemplateCode\templateCode.md’) -
在main.js文件中
引入css文件('在indx.html文件通过link方式引不进去，报错，请求方式变成了text/html ') -
重复点击左侧同一导航边栏时,控制台报错：_name: "NavigationDuplicated", name: "NavigationDuplicated"
出现原因：因为 vue-router >= 3.1以后，回调形式改成了promise api，返回的是promise对象，如果没有捕获到错误，便会出现如题错误 解决方法： a. 在router.js文件内添加如下代码 const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err); }; ('该方法试验后，可行') b. 在使用this.$router.push时： this.$router.push(route, () => {}, (e) => { console.log('输出报错',e) }) 或者 this.$router.push(route).catch(err => { console.log('输出报错',err) }) -
vuex的使用
vuex: 是专门为vue.js应用设计的全局状态管理架构，统一管理和维护各个vue组件的可变化状态，你可以将之理解为vue组件里的某些data 主要涉及以下五大核心属性： i： state 基本数据 ii： getters 从基本数据派生的数据 iii： mutations 提交更改数据的方法，同步 iv： actions 类似装饰器，包裹mutations使之可以异步 v： modules 模块化vuex a. 在根文件main.js中 import store from './store' 创建vue实例，并将store注册在该实例内 i. const app = new Vue({ store }) 将该实例挂载到Dom上 app.$mount('#app') ii. new Vue({ store }).$mount('#app') b. 在各组件中获取及修改 获取：this.$store.state.xxx 修改： 通过 this.$store.commit('Mutations内修改相应变量的方法',msg->需要修改后的新值) Mutations内修改相应变量的方法共接收两个参数：第一个是state，第二个是需要修改的msg 接收state用于获取变量：state.xxx = msg over.... -
在根目录创建util工具类文件夹，用于存放各类常用js方法
a.函数的防抖与节流 _ debounce.js 鉴于抛出时使用的是 export const Debounce，所以引用时使用 import {Debounce} from '@/util/dedounce.js' over... -
在构建首次进入页面的路由时，出现以下报错
[vue-router] Named Route 'XXX' has a default child route. 说明：因为一级路由设置了默认的子路由，实际访问的是默认的子路由，所以导致以上vue警告即报错 解决方法： 将一级路由的name属性注释掉 ok... -
按照第3项引入vuetify的方式，引入elementui库，会出现模块丢失的错误
出现原因：因为在可视化终端引入elementUI的过程中，修改了app.vue文件 需改回原样 需注意： 根元素必须是v-app <!-- <template> <v-app id="app"> <router-view></router-view> </v-app> </template> <script> export default { name: 'app' } </script> --> -
如果数组的数据已经发生改变，但是页面效果未实现 数据变 则 页面变 的效果，那么采取以下方式解决
第一步：在所在单页应用中引入vue ‘import Vue from vue’ 第二步： 处理数据时，加入一行代码 Vue.set('发生改变的数组','[需要修改的索引值]','发生改变的数组[需要修改的索引值]') 例如：Vue.set(this.List,[1],this.List[1]) -
判断一个值是否为数值型
value => parseFloat(value).toString() != "NaN"
Hold The Faith . Forever！
We can find a way .
Someday .
A path to a new world
And maybe
Maybe its just the begnning after all
