今天来学习一下如何搭建VUE项目。
首先我们需要在官网上下载nodejs文件,我们在这里选择Windows安装包。
![7861972-fa95c5fe235e9223.png](https://i-blog.csdnimg.cn/blog_migrate/6eeaf97afbcb82f3ae3284a3b530ac22.png)
VUE版本界面.png
- 安装完成之后打开命令提示符输入一下命令
node -v
npm -v
- 下一步安装vue
npm install -g @vue/cli
- 检测安装的vue版本(注意:这里V要大写)
vue -V
- 准备工作做完之后,我们开始正式创建项目
vue create xiaomi
- 安装完成之后,启动项目
cd xiaomi
npm run serve
- 项目创建完成之后,配置项目
1.引入css/js
import "./assets/css/XXX.css"
import "./assets/js/XXX.js"
2.创建页面 /views/
XXX.vue
3.编辑根组件 /app.vue
router-view
router-link
4.配置路由
- 1.导入组件
import User from '路径'
- 2.配置组件
{
path:"/user",
name:"user",
component:User
- 配置主页
1.pre 安装axios
npm install axios
2.main.js 配置axios
import axios from 'axios'
Vue.prototype.$http = axios
3.Home.vue
1.created 调用获取数据
this.getData
2.methods getData()
$http.get()
.then(res=>{
// 更新数据
})
3.template 把数据渲染(根据数据的变化而变化)
好了,今天的分享就到这里了!
愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。
![7861972-c15692bc3ce6fc3a.jpg](https://i-blog.csdnimg.cn/blog_migrate/ba985222f701324db7cb9077569ad267.jpeg)
小晴天