目录
一、安装Node
- 首先安装Node环境
- 配置环境变量:path指引Node目录,比如:path:D:/Node
- cmd黑窗口查看环境是否配置正确:node -v 出现版本号就没问题
二、Vue-cli
2.1 初识vue-cli3
首先我们搭建Vue开发环境,这里我们使用Vue-cli(脚手架),它会帮我们生成Vue开发的项目结构,在使用Vue-cli之前,由于我们安装的方式是Npm所以要先确保当前系统安装了Node环境
- cmd黑窗口:npm install -g @vue/cli 这是全局安装
- 命令vue -V 查看是否安装vue成功
2.2 搭建项目
-
cmd黑窗口:vue create 项目名
-
我们选择自定义安装,空格选中,回车确定
.
-
启动项目:当Npm把项目配置好后cd 到项目中,执行 npm run serve 命令
2.3 目录结构
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- public // 静态文件,比如一些图片,json数据等
| |-- favicon.ico // 图标文件
| |-- index.html // 入口页面
|-- vue.config.js // 是一个可选的配置文件,包含了大部分的vue项目配置
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- package.json // 项目基本信息,包依赖信息等
三、Vue的ajax
3.1 axios使用方式
``
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
四、Vue父子组件
4.1 父组件向子组件传递数据
子组件在父组件的并作为标签引入,通过设置标签的属性传递数据,在子组件用props接受,,例如下面这样,父组件parent.vue引入子组件child.vue,将父组件的数据name通过设置标签child的name属性传递给子组件,子组件通过props传递接受,接受后,在子组件内this.name就是父组件的name数据。
4.2 子组件向父组件传递数据
- 发布订阅 发布 emit 订阅 on{}
- on订阅,emit发布,on和emit是在Vue的原型上的,每个实例都可以调用。
- 父亲绑定一个事件,儿子触发这个事件,并将参数传递过去