Vue笔记

vue和angular、react都是前端框架；
单页面框架；
基于模块化组件化的开发模式；
Vue 简单 灵活 高效
搭建vue开发环境：
1.必须要安装node.js
2.搭建vue的开发环境 ，搭建vue的脚手架工具  官方命令行工具
    npm install --global vue-cli     / cnpm install --global vue-cli    （此命令只需要执行一次）
3.创建项目     必须cd到对应的一个项目里面
      vue init webpack vue-demo01
      cd vue-demo01
      cnpm install   /   npm install    如果创建项目的时候没有报错，这一步可以省略，如果报错了，cd到项目里面运行cnpm install   /  npm install
      npm run dev
4.另一种创建项目的方式
      vue init webpack-simple vue-demo02
      cd vue-demo02
      cnpm install   /   npm install    如果创建项目的时候没有报错，这一步可以省略，如果报错了，cd到项目里面运行
      npm run dev

cnpm 淘宝镜像 下载包的速度更快些     http://npm.taobao.org/
安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org
 
  双向数据绑定   MVVM   vue就是一个MVVM的框架。
  M  model  V  view
  MVVM：  model改变会影响视图view，view视图改变反过来影响model
  双向数据绑定必须在表单里面使用。
  vue-cli是一个基于nodeJs、用于快速搭建vue项目的脚手架。

全局安装vue-cli（以后其他项目可直接使用）;npm install -g vue-cli

更新：npm update vue-cli

查看安装成功否（有版本号就是成功，V大写）;vue -V

查看npm注册表里vue-cli版本号：npm view vue-cli

ESLint(一个javascript代码检测工具)、unit tests(单元测试)、Nightwatch（一个e2e用户界面测试工具）。

App.vue就是默认的主页面,HelloWorld.vue是在主页面中显示的内容

 在router下面的index.js是我们路由.作用是配置你添加的页面,和页面跳转的URL的.

在config下面的Index.js是我们的配置文件,可以配置我们和后台交互,可以更改vue的启动端口号

命令里的-g 是全局安装的意思,如果只是想安装在本项目中,即npm install package-name --save

cnpm与npm的区别:CNPM跟NPM用法完全一致,只是cnpm指的是国内的npm镜像源，npm是使用的国外的镜像源

UI组件：安装Element-ui

安装方式: 在Terminal中输入 : npm i element-ui -S 回车等待安装；推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

安装好之后,我们需要在main.js里引入Element

注意: 如果不引入,你就无法在vue页面里使用Element组件,index.css是样式.

 

import ElementUIfrom 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

#另外一种方式是: CDN ；在页面上引入 js 和 css 文件即可开始使用。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响

在Terminal中按CTRL + C 即可关闭vue