vue从0创建一个项目,创建一个vue项目具体步骤

　　Vue.js是目前优秀的Web前端框架，强烈推荐大家初学。本文主要介绍如何从零开始一步步构建Vue项目的相关信息。通过图片、文字、示例代码非常详细的介绍，有需要的朋友可以参考一下。

一、项目创建

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

2、选择Vue2

3、运行该项目

4、创建成功

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

二、路由的配置

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

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

2、配置路由

　　(1.创建路由器文件夹。

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

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

　　路由组件与非路由组件的归类：组件文件夹通常放置非路由组件。

　　Pages文件夹通常放置路由组件。

　　路由还有很多没写：（

　　1.路由守卫：解决特定条件下无法跳转到其他路由的问题。

　　2.辅助路由

　　3.有些地方没有显示路由组件，可以添加一个属性。

　　4.路线的传递和跳跃

　　）

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

　　//介绍Vue

　　从“Vue”导入Vue；

　　//介绍Vue路由器

　　从“vue-router”导入VueRouter

　　//使用VueRouter

　　vue . use(vue router)；

　　//引入路由组件

　　从“@/components/Home”导入个人主页

　　从“@/components/Search”导入搜索

　　//向外界公开一个Vue实例

　　导出默认的新VueRouter({

　　//配置路由

　　路线：[

　　{

　　路径：“/Home”，

　　成分：家，

　　姓名：家，

　　meta:{isshow:true}

　　{

　　路径：“/Search”，

　　组件：搜索，

　　名称：“搜索”，

　　meta:{isshow:false}

　　//重定向

　　{

　　路径：“*”，

　　重定向：“/Home”

　　}

　　]

　　})

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

　　从“vue”导入Vue

　　从导入应用程序。/App.vue

　　Vue.config.productionTip=false

　　//传入路由

　　从导入路由器。/路由器

　　新Vue({

　　render: h=h(App)，

　　//配置路由，KV一致，V省略

　　//此处使用路由器后，所有组件都有$router，$route属性。

　　//$router最常用于跳推跳$route最常用于获取参数

　　路由器

　　}).$ mount(“# app”)

　　Vue中配置一个出口 router-viwerouter-view/

　　模板

　　div id=应用程序

　　标题/

　　！-路线的出口-

　　路由器视图/路由器视图

　　页脚/

　　/div

　　/模板

　　脚本

　　从导入标题。/组件/标题

　　从“@/组件/页脚”导入页脚

　　导出默认值{

　　名称：“应用程序”，

　　组件：{

　　标题，

　　页脚

　　}

　　/脚本

　　风格

　　/风格

三、API接口配置

1、安装axios

　　Axios可以按照帮助文档配置，不用死记硬背。

　　这里面有代表安装成功

2、axios的二次封装

　　(1)创建api文件夹和resquest.js文件(其实这个文件就是axios)

　　(2.axios的第二个包看文档。

　　//参考轴

　　从“axios”导入axios；

　　const requests=axios.create({

　　//基URL的角色。例如，我有一个界面，它的URL是www.baidu/api/love.

　　//如果很多接口都是www.baidu/api/xxx

　　//我可以省略/api，因为axios会自动为你添加，这就是baseUrl的作用。

　　baseURL:“/API”，

　　//请求超时为5s。

　　超时：5000，

　　});

　　//请求拦截器，可以在发送请求之前做一些事情

　　requests . interceptors . request((config)={

　　//config配置对象，它有一个属性请求头头。

　　返回配置；

　　})

　　//对应的拦截器

　　requests . interceptors . response((RES)={

　　//服务器成功返回

　　//简化返回的数据，只返回数据

　　返回res.data

　　}，(错误)={

　　//失败

　　//静态函数Promise.reject返回被拒绝的Promise对象。使用错误实例来获取错误原因，对于调试和选择性错误捕获非常有帮助。

　　Promise.reject(新错误( faile ))；

　　})

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

　　//统一结构管理

　　从导入请求。/请求

　　//方法有两种方式：get和post。

　　//对于带参数的模板，需要一些模板字符串

　　export const reqGetSomeInfo=(p)=requests({ URL:` /Baidu/$ { p } `，方法： get })；

　　//直接写，不带参数

　　export const reqgetsomeinfo 2=()=requests({ URL:/Baidu ，方法： get })；

　　//如果需要传递对象，可以使用data属性。

　　export const reqGetSomeInfo3=(p，data)=requests({ URL:` /Baidu /$ { p } `，data:data，method: get })；

3、跨域问题

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

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

　　代理：

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

　　//将代理配置为跨域

　　devServer: {

　　///api的作用是：当API出现在地址中时，浏览器会自动向目标请求数据。

　　//注意配置这个，需要重启项目。

　　代理服务器：{

　　/api: {

　　目标：“http://39.98.123.211”，

四、Vuex

　　之前写的关于Vuex的详细解释并不多余。

　　1.安装vuex

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

　　2.配置仓库以创建大仓库的存储文件夹。主文件夹是主仓库

　　Home warehouse(这里调用api接口)

　　从“@/api”导入{ reqGetSomeInfo }

　　常量状态={

　　SomeInfo:[]//这里是空对象还是空数组取决于接口返回的值。

　　}

　　常量突变={

　　GETSUM(state，someInfo)

　　{

　　state . some info=some info；

　　}

　　常量操作={

　　//params是携带的参数。

　　异步getsum({commit}，params)

　　{

　　let result=await reqGetSomeInfo

　　If(result.code==200)//成功的请求将返回code=200

　　{

　　提交( GETSUM ，result.data)

　　}

　　//getter是为了简化操作

　　const getters={}

　　导出默认值{

　　状态，

　　行动，

　　吸气剂，

　　突变

　　}

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

　　从“Vue”导入Vue；

　　从“vuex”导入Vuex

　　vue . use(Vuex)；

　　从导入主页。/Home

　　导出默认的新Vuex。商店({

　　模块：{

　　家，//家仓库注册在大仓库。

　　}

　　})

　　入口文件被引入storemain.js。