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