VUE项目的搭建

今天来学习一下如何搭建VUE项目。
首先我们需要在官网上下载nodejs文件，我们在这里选择Windows安装包。

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 把数据渲染（根据数据的变化而变化）
好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天