qq_27868533的博客

表格使用的是elementUI，表头是动态的，根据开始日期的年月和结束时间的年月计算获取；单元格第一行绿色进度条是计划工程进度，第二行绿色是实际功能进度条，红色是实际进度的百分比。

今天各种尝试用axios调取本地的json文件，发现都是404，明显路径不对，瞎折腾了一下午才发现vue-cli3的index.html是再public文件夹下，所以"/"对应的路径就是public文件夹，只需要把json文件放到public文件夹下就可以了axios.get("/xxxx.json")...

       安装及代理跨域在这就不介绍了，可查看我的另一篇笔记 Vue2项目架构搭建（六）——axios调用接口、webpack代理跨域配置。封装请求       封装的时候，我通常喜欢把请求抽象成三个文件，文件位置放在src中，只要你能引用到，就没

Font Awesome       用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利，不管是在加载还是修改方面，字体图符远远优于图片。但是饿了吗封装的Element UI提供的字体图符少之又少，又不想用图片，只能自己扩展图符咯。       &nb

       遇到一个很奇怪的问题，就是之前vue-cli创建的项目，在起初修改文件可以热重载，但是后面突然间就无法无刷新浏览器更新了，一只以为是热重载出问题了，折腾了半天也没纠结出什么结论，最后百度了一下，原来是编译器webstrom的锅。问题原因     &nbs...

vue引入sass全局变量       sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错...

组件是vue最强大的功能之一，一个vue文件就是一个Vue组件，主要包括三部分：template，script，style。        template标签内是写组件视图的地方，但是要注意的一点是  template中的内容必须先包裹一层html标签，否则直接报错，别问为什么，这是铁律。         script标签内主要是引入第三方库、组件、方法和数据调用等。         style

sass引入     方法一：在main.js中加入import "./style/***/****.scss";     方法二：在App.vue文件的style@import "./style/***/****.scss";     方法三：在vue文件的style中写sass语句，需要设置style的lang属性为“scss”否则会无效，scoped表示只对该组件生效。 div{

vue-cli创建的项目目录比较简单，而且还有些测试的界面需要删除，因此在路由设置和组件引入之前先调整一下项目的目录。vue-cli创建的目录├── README.md                       // 项目说明文档├── node_modules                    // 项目依赖包├── build                          /

vue-cli是官方命令行工具，该工具为现代化的前端开发工作流提供了开箱即用的构建配置，只需几行命令就可以搭建好基础架构。安装vue-cli     使用npm全局安装vue-clinpm install -g vue-cli     安装完成后，执行vue list     会报“vue不是内部或外部的命令”，说明环境变量有问题vue-cli环境变量设置     设置vue-cli的系统环境变量

此系列博文为搭建Vue2项目架构，使用知识涉及npm安装第三方库、webpack项目管理、vue-cli安装Vue全家桶、vue-router 2.0路由跳转、axios获取API数据，从基础工具开始到项目打包。NPM安装及配置        NPM是随NodeJs一起安装的包管理工具，因此只需要安装nodeJs即可，npm允许从NPM服务器下载别人编写的第三方包到本地使用，前端人员不用再满世界的

vue开发的东西基础架构已经搭建完成，还有很多关联的插件，具体等以后用到再补充，最后就是项目打包。打包代码vue-cli已经配置好打包工具，只需要我们在当前项目下build就好，连续两次Ctrl + c 退出服务启动，执行npm run bulid下图显示完成打包和生成的文件目录： 打包完成后，项目目录会自动生成打包生成的dist文件夹，证明打包成功了。检测打包代码

路由是SPA子页面的跳转机制，Vue的官方路由是vue-router。安装路由vue-cli在创建项目时有询问是否创建vue-router，如果选了Y，vue-cli已经将路由安装好了,可以直接跳过安装和引入，直接去配置组件；如果选了N，执行npm install --save-dev vue-router路由配置安装好之后，在router文件夹下的index.js中引入v

自从Vue 更新到 2.0 之后，官方就不再更新 vue-resource目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求。axios的使用vue-cli没有预下载axios库，因此需要先安装axios库： npm install --save-dev axios安装好之后，先在main.js中引入axios，再设置全局属性$http指向axios

工具类方法定义不可避免的每个项目都会抽出很多数据处理的公共方法，统筹到工具类文件中，vue在定义工具类方法和传统方法一样，只是用了es6的export default导出，示例如下：export default{ alertTip (str) { alert(str) } method1 () { } method2 () { } ...}