1、使用vue初始化项目

vue create msm-demo  #创建项目

npm run serve    #部署

2、更改public文件夹下面的index文件,只留下

<div id="app"></div>

3、创建配置vue.config.js
module.exports = {
devServer: {
port: 8888, //端口号,如果端口号占用,会自动提升1
host: "localhost", //主机名,127.0.0.1,真机:0.0.0.0
https: false, //协议
open: false, //启动服务时自动打开浏览器访问 }, lintOnSave: false, //关闭格式检查
productionSourceMap: false, // 打包时不会生成.map 文件,加快打包速度
}

4、整合第三方库

1、安装axios,处理异步请求

npm i -S axios

2、安装pubsub-js,实现非父子组件间通信

npm i -S  pubsub-js

3、查看package.json中是否有对应依赖


5、整合ElementUI

1、npm安装:

npm i element-ui -S

2、编辑main.js

import Vue from "vue";
//引入组件库
import ElementUI from 'element-ui';
//引入样式
import 'element-ui/lib/theme-chalk/index.css'; import App from "./App.vue";
import router from "./router"; //使用ElementUI
Vue.use(ElementUI); //报错是否全,开发环节位false,生产环节为true
Vue.config.productionTip = process.env.NODE_ENV === 'production'; //开发环境 development,生产环境 production
console.log(process.env.NODE_ENV) new Vue({
router,
render: h => h(App)
}).$mount("#app");

6、Axios封装和跨域问题

1、封装Axios对象  github:https://github.com/axios/axios

(自己封装的Axios在后续可以使用axios中提供的拦截器)

  1、在src目录下创建utils目录及utils下面创建request.js文件,自己创建axios对象

// 导入axios
import axios from 'axios' // 原来axios发送请求,在public文件夹下的文件可以不指定public,/db.json默认查找public文件夹下的文件
// axios.get('/db.json').then(response => {
// const data = response.data
// console.log(data)
// }) // 自己创建axios对象
const request = axios.create({
//基础路径
baseURL: '/',
timeout: 5000 //请求超时
}) //使用自定义的axios对象发送请求
// request.get('/db.json').then(response => {
// console.log(response.data)
// }) // 请求拦截器
//使用自定义的axios对象
request.interceptors.request.use(config => {
// 请求拦截
},err =>{
// 出现异常
// 使用ES6的语法
return Promise.reject(error);
}) // 响应拦截器
request.interceptors.response.use(response =>{
// response.data
return response
},error =>{
return Promise.reject(error);
}) // Add a request interceptor
// axios.interceptors.request.use(function (config) {
// // Do something before request is sent
// return config;
// }, function (error) {
// // Do something with request error
// return Promise.reject(error);
// }); // // Add a response interceptor
// axios.interceptors.response.use(function (response) {
// // Any status code that lie within the range of 2xx cause this function to trigger
// // Do something with response data
// return response;
// }, function (error) {
// // Any status codes that falls outside the range of 2xx cause this function to trigger
// // Do something with response error
// return Promise.reject(error);
// }); // 导出自定义创建的axios对象,导出后别人就可以使用此对象
export default request

2、在src文件夹下创建api文件夹,api文件夹放调用api接口的文件,src可用@表示,哪个组件要引用对应的api,就可以直接从api文件夹中进行api的引用

/api/test.js:

import request from '@/utils/request'

const BASE_URL = '/dev-api'

// 这里直接调用对应的方法发送请求
// request.get('/db.json').then(response => {
// console.log(response.data)
// }) //测试2,以对象配置的方式进行指定请求方式
//开发过程中,一般采用这种方法
request({
method: 'get',
url: BASE_URL + '/db.json'
}).then(response =>{
console.log('get2',response.data)
}) //导出一个默认对象
export default {
//定义方法
getList() {
//返回一个对象
const req = request({
method: 'get',
url: BASE_URL + 'db.json'
})
return req
}
}

/components/Helloworld.vue:调用接口

import testApi from '@/api/test'

export default {

  data() {
return {
list: []
}
}, created() {
this.fetchData()
},
methods: {
fetchData() {
testApi.getList().then(response => {
console.log('get3',response.data)
this.list = response.data
})
}
},

3、跨域现象:

前后端分离时,前端和后端API服务器可能不在同一台主机上,就存在跨域问题,浏览器限制了跨域访问

同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域

解决开发环境跨域问题:

  配置代理https://cli.vuejs.org/zh/config/#devserver:通过 vue.config.js 中的 devServer.proxy 选项来配置。

proxy: {    //开发环境代理配置
// 配置前缀
'/dev-api': {
// 目标服务器地址,代理访问 http://localhost:8001
target: 'http://localhost:8001',
changeOrigin: true, //开启代理转发
pathRewrite: {
// /dev-api/db.json 最终会转发到http://localhost:8001/db.json
'^/dev-api': '', //此设置将请求地址前缀 /dev-api 替换为空
}
}
}

7、配置不同环境 常量值

https://cli.vuejs.org/zh/guide/mode-and-env.html

# 只有以 VUE_APP_ 开头的变量会被 webpack 静态嵌入到项目中进行使用 process.env.VUE_APP_XXXX

分别配置.env.development和.env.production

.env.development:

# 目标服务接口地址,这个地址时按照自己环境进行配置,添加或者更改配置后,需要重新启动服务
VUE_APP_SERVICE_URL = 'http://localhost:8001' # 开发环境的前缀
VUE_APP_BASE_API = '/dev-api'

.env.production:

# 只有以 VUE_APP_ 开头的变量会被 webpack 静态嵌入到项目中进行使用

VUE_APP_BASE_API = '/pro-api'

调用例子:

proxy: {    //开发环境代理配置
// 配置前缀
// '/dev-api': {
[process.env.VUE_APP_BASE_API]: {
// 目标服务器地址,代理访问 http://localhost:8001
target: process.env.VUE_APP_SERVICE_URL,
changeOrigin: true, //开启代理转发
pathRewrite: {
// /dev-api/db.json 最终会转发到http://localhost:8001/db.json
// '^/dev-api': '', //此设置将请求地址前缀 /dev-api 替换为空
['^' + [process.env.VUE_APP_BASE_API]]: ''
}
}
}

Vuejs实战项目步骤一的更多相关文章

  1. Vuejs实战项目四:权限校验

    路由跳转参考文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 在/src下创建permission.js进行权限 ...

  2. Vuejs实战项目五:数据列表

    1.在EasyMock 中添加数据列表模拟接口 请求url:/suyuan/list 请求方式:get 描述:数据列表 mock.js配置: 例: { "code": 2000, ...

  3. Vuejs实战项目三:退出系统功能实现

    1.创建Mockjs接口 method:post url:/user/logout 描述:退出系统 response: { "code": 2000, //状态码 "fl ...

  4. Vuejs实战项目:登陆页面

    1.在view文件夹下创建login文件夹,创建index.vue:代表登录的组件 配置router.js,导入登录组件 import Vue from "vue"; import ...

  5. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  6. vue+websocket+express+mongodb实战项目(实时聊天)

    继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...

  7. .NET Core实战项目之CMS 第三章 入门篇-源码解析配置文件及依赖注入

    作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9998021.html 写在前面 上篇文章我给大家讲解了ASP.NET Core的概念及为什么使用它,接着 ...

  8. .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了

    写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...

  9. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

随机推荐

  1. JavaScript实现几种常见的图形

    一.四种常见的三角形 第一种三角形: for(var i=1;i<=5;i++){        for( var j=i;j<=5;j++){                 docum ...

  2. BP 算法之一种直观的解释

    0. 前言 之前上模式识别课程的时候,老师也讲过 MLP 的 BP 算法, 但是 ppt 过得太快,只有一个大概印象.后来课下自己也尝试看了一下 stanford deep learning 的 wi ...

  3. GNU GRUB引导的默认启动项是ubuntu

    安装了ubuntu16.04后,GNU GRUB引导的默认启动项是ubuntu,如果希望默认启动项是windows,修改方法如下: step1. 进入Ubuntu系统,打开终端,输入 sudo ged ...

  4. 杜教筛&套路总结

    杜教筛 \[ \begin{split} (g*f)(i)&=\sum_{d|i}g(d)f(\frac id)\\ \Rightarrow g(1)S(n)&=\sum_{i=1}^ ...

  5. Android HttpClient 用法以及乱码解决

    一.Post提交 并可以实现多文件上传 // 创建DefaultHttpClient对象 HttpClient httpclient = new DefaultHttpClient(); // 创建一 ...

  6. java日志管理 - slf4j+log4j2

    1 . 概述 1.1  日志框架实现 log4j是apache实现的一个开源日志组件: logback同样是由log4j的作者设计完成的,拥有更好的特性,用来取代log4j的一个日志框架,是slf4j ...

  7. 01_Hibernate持久化

    一.简介 思考:为什么使用Hibernate? Hibernate对JDBC访问数据库的代码进行了封装. Hibernate是一个基于JDBC的主流持久化框架. Hibernate的性能比较好,它是一 ...

  8. 「loj#6261」一个人的高三楼

    题目 显然存在一个这样的柿子 \[S^{(k)}_i=\sum_{j=1}^iS^{(k-1)}_j\] 我们可以视为\(S^{(k)}\)就是由\(S^{(k-1)}\)卷上一个长度为\(n\)全是 ...

  9. Ubuntu安装CUDA9.2(不更新驱动)

    1.先装驱动,以为安装CUDA时安装最新驱动导致CUDA用不了 sudo apt-get install nvidia-396 2.参考这,安装好CUDA 9.2 https://developer. ...

  10. 怎么对C++枚举(不是类)里面的东西进行随机

    把枚举里面的东西取到一个数组如: enum 枚举类型 a[]={ 枚举元素 }; 变成了一个数组,然后把随机结果当成枚举数组的索引,就可以得到随机的枚举元素了.