Vue从0到1快速搭建

下载Vue脚手架

1、进入cmd

打开vue保存路径，进入对应的cmd页面

2、下载脚手架

输入npm install -g @vue/cli

3、配置淘宝仓库镜像

npm config set registry https://registry.npmmirror.com

创建Vue项目

1、进入cmd页面

打开vue项目保存路径，进入cmd页面，输入vue create [项目名]

2、选择vue的版本

3、选择插件

选择需要的插件，按空格取消或选中

4、选择版本

选择版本，选3 (Element组件对vue3不适配，需要vue2版本)

5、保存位置

依赖的保存位置

6、创建快照

以上的选择要不要做一个快照，方便下次创建，输入一个大写的N不保存即可

7、下载

接下来会联网下载所选择的内容以及vue相关的程序，加载完以后本地就会出现创建的hello项目

vue基本项目模型

自定义组件导入

注册完容器以后即可使用

补全插件

缺失的组件，在控制终端输入npm install，就会根据package. json重新下载自动下载缺失的组件

添加Element组件

1、组件描述

Element组件是一个快速搭建网络前端界面的组件

2、下载组件

在控制终端输入npm install element-ui，就会自动下载Element组件

访问组件的网络链接：组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation

3、引入主键，全局注册

在main.js中进行配置

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'; // 第一步：导入element-ui
import 'element-ui/lib/theme-chalk/index.css';  // 第一步：导入element自带的css

Vue.config.productionTip = false
Vue.use(ElementUI); // 第二步：将组件进行全局注册
j
new Vue({
  render: h => h(App),
}).$mount('#app')

4、使用组件

可以直接去官方文档里面找模板选择复制，套用，访问组件的网络链接：组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation

添加Axios组件

1、组件描述

这是一个发送和获取网络请求的组件，它对ajax进行了封装，更加方便使用

文档：起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)https://www.axios-http.cn/docs/intro

2、下载组件

在控制终端输入npm install axios，就会自动下载Axios组件

3、发送网络请求

网络请求获取数据一共有两种方法

第一种：局部引入

第二种：全局引入

在main.js中导入axios

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios' // 导入axios

axios.defaults.baseURL = "http://localhost:8088"  // 配置前半段路径
Vue.prototype.$http = axios // 将axios配置到Vue属性中，this.$http相当于axios	$http名字可以自定义

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

发送网络请求

解决跨域问题

从后端解决跨域问题

添加VueRouter路由组件

1、组件描述

这是一个路由组件，负责跳转页面

2、下载组件

在控制终端输入npm install vue-router@3，就会自动下载VueRouter组件，因为创建的是vue2的项目，只有VueRouter3的版本适配所以这里下载VueRouter3的版本

3、创建路由模块

在src下创建router包，在包下创建index.js文件

import VueRouter from "vue-router";
import Vue from "vue";
import Faxianyinyue from '../components/Faxianyinyue.vue'   // 自己创建的组件
import Guanzhu from '../components/Guanzhu.vue' // 自己创建的组件
import Wodeyinyue from '../components/Wodeyinyue.vue'   // 自己创建的组件

Vue.use(VueRouter)  // 将VueRouter设置成vue的插件

const router = new VueRouter({
    // 指定hash属性与组件的对应关系
    routes:[
        //  这里可以设置一个重定向，默认主页自动跳到faixianyinyue中
        //	'/'是主页
        {path:'/',redirect:'/faxianyinyue'},
        {path:'/faxianyinyue',component:Faxianyinyue},	// 前面是链接，对应后面的组件
        {path:'/guanzhu',component:Guanzhu},
        {path:'/wodeyinyue',component:Wodeyinyue},
    ]
})

export default router   // 导出

添加标签和占位标签

在main.js中导入一下router

import Vue from 'vue'
import App from './App.vue'
import router from './router/index' // 这里如果名字叫indes的话，是可以省略不写的，这里以为示范所以加上

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router:router	// 把导出的router，放到new的vue对象中
}).$mount('#app')