Vue初学者

东拼西凑的页面

• 功能1 动态列数据加载
• 功能2 可筛选数据选择后打印

---

那么2天是怎么从对vue开发一窍不通，做出该需求页面的呢?

学习的内容：

1. 搭建vue-cli2项目
2. vue-Ant框架
3. vue.js语法
4. vxe-table文档
5. 面向百度/google编程（必备技能）

---

快速搭建vue-cli项目：

• 下载VS-Code 开发工具:
• 安装node 修改npm config 地址

查看是否生效 node -v
发现报错 npm WARN config global --global, --local are deprecated. Use `–locatio
解决方案:
打开nodejs安装位置的文件夹。并打开两个文件 npm.cmd 和 npm
找到那2个文件里面的prefix -g替换为prefix --location=global

npm -v 无内容
之前安装的时候改过配置文件导致的读取配置失败
解决方案:
删除 c盘的.npmrc文件

• 安装vue-cli

发现node版本太高，需要指定vue组件的版本才能正常安装

• 生成vue-cli2项目

选择一个目录，在该目录下打开终端，输入 vue create 工程名，创建工程

vue-cli2启动

• 项目目录结构，组件的基本使用
• 项目运行命令，导入依赖
• vue.js语法简单学习

vue官网:https://cn.vuejs.org/guide/essentials/application.html#the-app-instance
菜鸟教程:https://www.runoob.com/vue2/vue-forms.html

ps:官网讲的太细了而且没法试，先去菜鸟教程简单看看

遇到的坑

1需要获取没被筛选的列，由于没找到vxe-table的文档api对应的地方，搞了半天

 var visibleColumns=this.$refs.xTable.getColumns().map(o => { return [o.field].toString() });//获取筛选的列名称
 var hideColumns = this.allColumns.filter(
 (item) => !visibleColumns.some((e) => e === item)
 )

2静态路由配置

1 下载依赖和创建路由目录和index.js文件夹
2 mian.js中引入1中创建的js import router from './routers/index'
3 app.vue 将index.js中配置的path引入 <router-link to="/xxxx">页面1</router-link> <router-view></router-view>

3日期选择框中文化

ant design 

vue:
import 'moment/locale/zh-cn';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';

main.js中
import moment from 'moment';