1.先做页面的html 以及css
html打好注释,方便查看
css具体到从那个标签开始(注意区分段)
2.在外部资源管理器中,cmd
使用 vue create 项目名
↓第三个选项 y n 选择packge.json
$ cd cli-phone
$ npm run serve
进入到浏览器查看自己建的项目
3.把做好的页面放入到components 区分html注释部分 头部 身体 尾部
样式分别添加进去 公共样式放到app.vue中
4.在view下面的文件夹中home.vue更改引入,把需要的组件引入
5.完成逻辑代码 子传父 子组件创建$emit (自定义事件名,参数)
父组件的模板中使用@自定义事件名
父传子 在子组件中使用props 父组件直接:v-bind使用 子组件中需要调用接口和watch监听
6.接口跨域 需要在src下面文件夹创建http 下面创建api.js
需要在子组件中引入 api.js import {get} from '@/http/api.js'
还需要创建vue.config.js
里面代码如下:
module.exports = {
devServer: {
proxy: 'http://v.juhe.cn/todayOnhistory'
}
}
在这之前需要安装axios
代码为:npm i axios -S
具体内容代码如下:import axios from "axios"
export const get = (url) => {
return new Promise((resolve, reject) => {
axios.get(url).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
7.更改配置 跨域后 需要重启一下项目 npm run serve