Mr.chen - vue
type: channel
link: https://blog.chenvle.com/tag/vue/
items: Vue项目引进ElementUI组件
items: 易懂的Vue.js入门教程

Vue项目引进ElementUI组件
type: item
date: 2019-10-22T08:40:00+08:00
description: 环境要求NodejsNodejs官网下载地址：http://nodejs.cn/download/具体安装参考其他资料打开cmd命令行，输入npm -v，如果出现如下图的显示，说明已经安装正确。如果安装版本比较老，想升级新版本npm install npm -g淘宝镜像npm使用的国外中央仓库，下载速度较慢，有的时候还会有部分文件被墙掉。npm install -g cnpm --registry=https://registry.npm.taobao.org建议使用淘宝镜像，安装完淘宝镜像以后可以使用 cnpm 代替 npm。例如webpack可使用如下命令：cnpm install webpack -g .安装 webpack安装webpackcnpm install webpack -g-g 表示安装为全局安装 vue-cli安装 vue 脚手架项目初始化工具 vue-clicnpm install vue-cli -g创建Vue项目vue init webpack +项目名称运行vuecnpm run dev访问localhost:8080引入ElementUI打开项目 src\main.js 添加import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)package.json文件中添加"element-ui": "^2.4.9"重新cnpm install测试是否安装完成在App.vue中随意添加elementUI标签 如： data() { return { input: '' } }保存后，打开网页显示出input即成功

易懂的Vue.js入门教程
type: item
date: 2019-10-21T23:01:00+08:00
description: 什么是Vue.js不管你想不想了解，你只需要大概知道，Vue就是和jQuery一样是一个前端框架，它的中心思想就是数据驱动，像远古时代的老前辈jQuery是结构驱动，什么意思呢，以前我们写代码时常用$('.dom').text('我把值改变了')，这种写法先要获得结构，然后再修改数据更新结构，而Vue的做法直接就是this.msg="我改变了"，然后msg就会同步到某个结构上，视图管理抽象为数据管理，而不是管理dom结构了。不懂没关系，慢慢来。还有一点必须要知道的是，Vue是国人写的，技术文档也妥妥的是中文，想到这我就有学习的动力搭建环境工欲善其事必先利其器，我们的学习计划从学会搭建Vue所需要的环境开始，node和npm的环境不用说是必须的，现在前端流程化很热门，基本上新的技术都会在这套流程的基础上做开发，我们只需要站在巨人的XX上装*就可以了。我假设你的机子上已经有了最新的node和npm了，那我们就只需要执行以下命令：$ npm install -g vue-cli构建完了之后，随便进入一个我们事先准备好的目录，比如demo目录，然后在目录中做初始化操作$ vue init webpack myProjectwebpack参数是指myProject这个项目将会在开发和完成阶段帮你自动打包代码，比如将js文件统一合成一个文件，将CSS文件统一合并压缩等。要是不知道webpack的话，建议先了解下为好，当然不了解也不影响我们接着往下走。init的过程中会问你给项目定义一些描述，版本之类的信息，可以不管，一直输入y确定跳过，完成之后出现以下界面，红框部分会提示你接下来要做的操作，按照它的提示继续敲代码就对了。cd myProject npm install npm run devnpm install 是安装项目所需要的依赖，简单理解就是安装一些必要的插件，需要等一段时间；npm run dev 是开始执行我们的项目了，一旦执行这个命令之后，等一小会，浏览器应该会自动帮你打开一个tab为http://localhost:8080/#/的链接，这个链接就是我们本地开发的项目主页了，如果没有，说明出错了。请移步到评论区回复吧。。。(PS：开发完成后执行npm run build会编译我们的源代码生成最终的发布代码，在dist目录下)看看Vue都给我们生成一些什么文件，这其中我们需要关注的是以下文件package.json保存一些依赖信息，config保存一些项目初始化配置，build里面保存一些webpack的初始化配置，index.html是我们的首页，除了这些，最关键的代码都在src目录中，index在很多服务器语言中都是预设为首页，像index.htm，index.php等；打开build目录中的webpack.base.conf.js，会看到这样的代码说明我们的入口js文件在src目录中的main.js，接下来我们就分析下这些初始化代码先；跟着代码走Vue的核心架构，按照官方解释和个人理解，主要在于组件和路由两大模块，只要理解了这两大模块的思想内容，剩下API使用就只是分分钟的事情了。所以在我的系列文中，会围绕组件和路由教大家开发一个前端组件库，这个过程也是我个人学习的练手项目，个人觉得一步步做下来之后，对Vue的理解就可以算是出师了，胜过读10遍书籍文档，那是后话了，先让我们看看最基本的Vue生成的默认代码吧！// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })先是第一句import Vue from 'vue'这句很好理解，就像你要引入jQuery一样，vue就是jquery-min.js，然后Vue就是$；然后又引入了./App文件，也就是目录中和main.js同级的App.vue文件；在Vue中引入文件可以直接用import，文件后缀名可以是.vue，这是Vue自己的文件类型，之前说的webpack会将js和css文件打包，同样的道理，在webpack中配置vue插件后（项目默认配…