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. 面试系列12 redis和memcached有什么区别

    (1)redis和memcached有啥区别 这个事儿吧,你可以比较出N多个区别来,但是我还是采取redis作者给出的几个比较吧 1)Redis支持服务器端的数据操作:Redis相比Memcached ...

  2. printk函数速率限制

    如果你不小心, 你会发现自己用 printk 产生了上千条消息, 压倒了控制台并且, 可能地, 使系统日志文件溢出. 当使用一个慢速控制台设备(例如, 一个串口), 过量的消息速率也 能拖慢系统或者只 ...

  3. css实现截取文本

    .ellipsis{ max-width: 260px; // 自定义 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ...

  4. Gabor filter for image processing and computer vision

    介绍 我们已经知道,傅里叶变换是一种信号处理中的有力工具,可以帮助我们将图像从空域转换到频域,并提取到空域上不易提取的特征.但是经过傅里叶变换后,图像在不同位置的频度特征往往混合在一起,但是Gabor ...

  5. POJ3321Apple Tree

    Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 39566 Accepted: 11727 Descript ...

  6. android 使用现成做get请求

    //接受子线程发来的消息 Handler hanler = new Handler() { @Override public void handleMessage(Message msg) { // ...

  7. System.UriFormatException: Invalid URI 解决方法

    mobox 企业网页登陆界面,sa 登陆后 提示 System.UriFormatException: Invalid URI: The URI scheme is not valid. at Sys ...

  8. 今天给各位介绍Linux touch命令详述

    触摸命令 touch命令有两个功能:一个是将现有文件的时间戳更新为系统的当前时间(默认模式),它们的数据将保持不变;第二个是创建一个新的空文件. 语法 触摸(可选) 最常见的用法:touch file ...

  9. 自己整理的一个访问SQLite3数据库的C++类

    原文地址:自己整理的一个访问SQLite3数据库的C++类作者:vigra 近日,对SQLite3的使用进行了研究.真不愧是优秀的嵌入数据库,API接口也极其简捷.基本上只要使用以下几个接口就能完成数 ...

  10. mysql order by排序查询速度问题

    SELECT * FROM `assets_message` LEFT JOIN purchase_message ON assets_message.purchase_id = purchase_m ...