一、项目创建

1、打开命令行窗口Cd /d进入想要创建项目的位置，输入vue create 项目名

2、选择Vue2

3、运行该项目

4、创建成功

在浏览器中输入以上网址：localhost:8080，来到一下界面，说明成功

二、路由的配置

1、安装路由（vue2 只能安装3版本的vue-router）

看一下这个文件有vue-router代表安装成功

2、配置路由

(1、创建router文件夹

(2、创建index.js，配置路由

重定向的解释：当网址下(如localhost:8080/xxx)匹配不到相应的路由的时候，则跳转到重定向所设置的路径

路由组件与非路由组件的归类：compoents文件夹一般放置非路由组件
pages文件夹一般放置路由组件

路由还有很多没写：（

1、路由守卫：解决在某些条件下不能跳转到其他路由

2、二级路由

3、路由组件在某些地方不展示，可以增加一个属性

4、路由的传参和跳转

）

meta:可以配置一些参数，作用其实是让一些非路由组件展示与不展示

//引入Vue
import Vue from "vue";
//引入Vue-router
import VueRouter from "vue-router";
//使用VueRouter
Vue.use(VueRouter);
//引入路由组件
import Home from "@/components/Home"
import Search from "@/components/Search"
//对外暴露一个Vue实例
export default new VueRouter({//配置路由routes:[{path:'/Home',component:Home,name:"Home",meta:{isshow:true}},{path:'/Search',component:Search,name:"Search",meta:{isshow:false}},//重定向{path:'*',redirect:"/Home"}]
})

在main.js出口文件中注册路由

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false
//引入路由
import router from './router'
new Vue({render: h => h(App),//配置路由，KV一致，省略V//这里使用router之后，组件身上都有$router,$route属性//$router最常用来跳转push跳转  $route最常用来获取参数router
}).$mount('#app')

Vue中配置一个出口 <router-viwe><router-view/>

<template><div id="app"><Header/><!-- 路由的出口 --><router-view></router-view><Footer/></div>
</template><script>
import Header from './components/Header'
import Footer from "@/components/Footer"
export default {name: 'App',components: {Header,Footer}
}
</script><style></style>

三、API接口配置

1、安装axios axios帮助文档配置的时候可以跟着来，不用死记硬背

这里面有代表安装成功

2、axios的二次封装

(1、创建api文件夹，创建resquest.js文件（其实该文件就是axios）

(2、axios的二次封装看着文档来

//引用axios
import axios from "axios";
const requests = axios.create({// baseURL的作用 例如我有一个接口的网址为www.baidu/api/love// 如果很多接口都是www.baidu/api/xxx//我可以省略/api，因为axios会自动帮你添上，这就是baseUrl的作用baseURL: '/api',//请求超时的时间为5stimeout: 5000,});//请求拦截器，发请求之前可以做一些事情requests.interceptors.request((config)=>{//config配置对象，有一个属性 请求头headersreturn config;})//相应拦截器requests.interceptors.response((res)=>{// 服务器成功返回//简化返回的数据，只返回datareturn res.data;},(error)=>{//失败//静态函数Promise.reject返回一个被拒绝的Promise对象。通过使用 Error的实例 获取错误原因（reason）对调试和选择性错误 捕捉很有帮助。Promise.reject(new Error("faile"));})

在API文件下创建一index.js文件，用来统一管理接口请求

//结构统一管理
import requests from "./request"//method 有get 和 post两种方式
// 有参数的需要些模板字符串``
export const reqGetSomeInfo = (p)=>requests({url:`"/baidu/${p}"`,method:"get"});
// 无参数直接写
export const reqGetSomeInfo2 = ()=>requests({url:"/baidu",method:"get"});
//需要传对象的可以用data属性
export const reqGetSomeInfo3 = (p,data)=>requests({url:`"/baidu"/${p}`,data:data,method:"get"});

3、跨域问题

跨域:如果多次请求协议、域名、端口号有不同的地方，称之为跨域

传统的解决方式：JSONP、CROS、代理

代理：

在vue.config.js里添加一下代码

 //配置代理跨域devServer: {// /api的作用是：当地址中，出现api时，浏览器会自动向target请求数据//注意配置这个，需要重新启动一下项目proxy: {"/api": {target: "http://39.98.123.211",},},},

四、Vuex

以前写的Vuex详解不赘叙了

1、安装vuex

同样这个json文件里面有，就是安装成功了

2、配置仓库

创建store文件夹，是为大仓库。Home文件夹是Home小仓库

Home仓库（在此处调用api接口）

import { reqGetSomeInfo } from "@/api"
const state = {someInfo:[]//此处是空对象 还是 空数组要看接口返回的值
}
const mutations = {GETSUM(state,someInfo){state.someInfo = someInfo;}
}
const actions = {//params是携带的参数async getsum({commit},params){let result =  await reqGetSomeInfo;if(result.code == 200)//请求成功会返回code = 200{commit("GETSUM",result.data)}}
}
//getter是为了简化操作
const getters = {}export default{state,actions,getters,mutations
}

小仓库需要在大仓库注册 Store.js

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);
import Home from "./Home"
export default new Vuex.Store({modules:{Home,//Home小仓库在大仓库里注册}
})

入口文件引入store main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false
//引入路由
import router from './router'
//引入仓库
import store  from './store'
new Vue({render: h => h(App),//配置路由，KV一致，省略V//这里使用router之后，组件身上都有$router,$route属性//$router最常用来跳转push跳转  $route最常用来获取参数router,//这里使用store后，组件身上都有了$store属性store,
}).$mount('#app')

整个流程走一遍，发现vue也没有那么难，真的把这四个组件搞明白，会很轻松。

前路漫漫，切不可放松。加油，努力

【Vue】从零搭建一个Vue项目相关推荐

vue入门级教程从零搭建一个vue项目
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...
React入门：从零搭建一个React项目
一.初始化项目新建文件夹,文件名firstreact 文件夹名称不要用react,node这类关键字,后面使用插件时会发生错误. init项目环境,项目信息可默认或自行修改 mkdir firstr ...
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目一.安装node环境二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目三.vu ...
如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
手把手教你从0开始搭建一个vue项目（完结）
前言上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
vue 环境的搭建及初始化项目
其实超级简单,虽然网上很多,但是我顺便记录下相当于做笔记吧 1nodejs 的安装, 在node官网下载,点击安装,安装的时候最好选择路径在d盘 2设置环境变量我的电脑-->属性-->系 ...
Babylonjs入门02——VsCode+vue+babylonjs开发第一个babylon项目程序
Babylonjs入门02--VsCode+vue+babylonjs开发第一个babylon项目程序 1 环境搭建 2 创建vue项目 3 基于vue项目写第一个babylon项目 4 下一期再见 ...
【前端】搭建一个VUE框架
大伙好,最近狠狠焦虑了,因为想搞前端技术岗找暑假实习担心自己能力不够,还是希望如果有同学大学期间就决定毕业找工作的话,一定要抓住机会大学期间狠狠锻炼本领噢,不要虚度光阴说了点题外话,回到正题,焦虑的 ...

【Vue】从零搭建一个Vue项目

一、项目创建

1、打开命令行窗口Cd /d进入想要创建项目的位置，输入vue create 项目名

2、选择Vue2

3、运行该项目

4、创建成功

二、路由的配置

1、安装路由（vue2 只能安装3版本的vue-router）

2、配置路由

(1、创建router文件夹

(2、创建index.js，配置路由

三、API接口配置

1、安装axios axios帮助文档配置的时候可以跟着来，不用死记硬背

2、axios的二次封装

(1、创建api文件夹，创建resquest.js文件（其实该文件就是axios）

(2、axios的二次封装看着文档来

3、跨域问题

四、Vuex

1、安装vuex

2、配置仓库

创建store文件夹，是为大仓库。Home文件夹是Home小仓库

Home仓库（在此处调用api接口）

小仓库需要在大仓库注册 Store.js

入口文件引入store main.js

整个流程走一遍，发现vue也没有那么难，真的把这四个组件搞明白，会很轻松。

前路漫漫，切不可放松。加油，努力

【Vue】从零搭建一个Vue项目相关推荐

最新文章

热门文章

【Vue】从零搭建一个Vue项目

一、项目创建

1、打开命令行窗口Cd /d进入想要创建项目的位置，输入vue create 项目名

2、选择Vue2

3、运行该项目

4、创建成功

二、路由的配置

1、安装路由（vue2 只能安装3版本的vue-router）

2、配置路由

(1、创建router文件夹

(2、创建index.js，配置路由

三、API接口配置

1、安装axios axios帮助文档 配置的时候可以跟着来，不用死记硬背

2、axios的二次封装

(1、创建api文件夹，创建resquest.js文件（其实该文件就是axios）

(2、axios的二次封装 看着文档来

3、跨域问题

四、Vuex

1、安装vuex

2、配置仓库

创建store文件夹，是为大仓库。Home文件夹是Home小仓库

Home仓库（在此处调用api接口）

小仓库需要在大仓库注册 Store.js

入口文件引入store main.js

整个流程走一遍，发现vue也没有那么难，真的把这四个组件搞明白，会很轻松。

前路漫漫，切不可放松。加油，努力

【Vue】从零搭建一个Vue项目相关推荐

最新文章

热门文章

1、安装axios axios帮助文档配置的时候可以跟着来，不用死记硬背

(2、axios的二次封装看着文档来