Vuejs实战项目步骤一
1、使用vue初始化项目
vue create msm-demo #创建项目 npm run serve #部署
2、更改public文件夹下面的index文件,只留下
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实战项目步骤一的更多相关文章
- Vuejs实战项目四:权限校验
路由跳转参考文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 在/src下创建permission.js进行权限 ...
- Vuejs实战项目五:数据列表
1.在EasyMock 中添加数据列表模拟接口 请求url:/suyuan/list 请求方式:get 描述:数据列表 mock.js配置: 例: { "code": 2000, ...
- Vuejs实战项目三:退出系统功能实现
1.创建Mockjs接口 method:post url:/user/logout 描述:退出系统 response: { "code": 2000, //状态码 "fl ...
- Vuejs实战项目:登陆页面
1.在view文件夹下创建login文件夹,创建index.vue:代表登录的组件 配置router.js,导入登录组件 import Vue from "vue"; import ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- vue+websocket+express+mongodb实战项目(实时聊天)
继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...
- .NET Core实战项目之CMS 第三章 入门篇-源码解析配置文件及依赖注入
作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9998021.html 写在前面 上篇文章我给大家讲解了ASP.NET Core的概念及为什么使用它,接着 ...
- .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了
写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
随机推荐
- oracle增加用户密码,cmd导入数据库
1.tomcat中sql语句 用户名 pdmis 密码pdmis create USER pdmis IDENTIFIED BY pdmis;grant create session to pdmis ...
- Mysql优化系列之查询优化干货1
从这一篇开始,准备总结一些直接受用的sql语句优化,写sql是第二要紧的,第一要紧的,是会分析怎么查最快, 因为当你写过很多sql后,查询出结果已经不是目标,快,才是目标.另外,通过测试和比较的结果才 ...
- Homebrew(brew)安装MySQL@5.7及配置
查找并确定自己需要安装的版本 brew search mysql ==> Formulae automysqlbackup mysql-connector-c mysql@5.5 mysql m ...
- spring:bean的作用范围和生命周期
bean的作用范围调整: <!--bean的作用范围调整 bean标签的scope属性: 作用:用于指定bean的作用范围 取值:常用的就是单例的和多例的 singleton:单例的(默认值) ...
- 怎么取消主键自增长的问题(SQL Server)
以前经常会碰到这样的问题,当我们删除了一条自增长列为1的记录以后,再次插入的记录自增长列是2了.我们想在插入一条自增长列为1的记录是做不到的.我们可以通过设置SET IDENTITY_INSERT & ...
- PyTorch中的C++扩展
今天要聊聊用 PyTorch 进行 C++ 扩展. 在正式开始前,我们需要了解 PyTorch 如何自定义module.这其中,最常见的就是在 python 中继承torch.nn.Module,用 ...
- centos6 php5.4 升級到php 5.6
因Centos6中的PHP版本有点底,需要升级PHP版本 [vagrant@localhost ~]$ php -v PHP 5.4.45 (cli) (built: Sep 30 2015 15:0 ...
- arguments的介绍(一)
arguments 是一个类数组对象.代表传给一个function的参数列表. 1.1 arguments length arguments 是个类数组对象,其包含一个 length 属性,可以用 a ...
- Ubuntu+Ruby+MySQL+Nginx+Redmine部署记录
(2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月26日) 周五的时候老大布置了一个任务下来,要部署一个Redmine用于研发部,同时升级工作室的Redmine ...
- day 40 MySQL之视图、触发器、事务、存储过程、函数
MySQL之视图.触发器.事务.存储过程.函数 阅读目录 一 视图 二 触发器 三 事务 四 存储过程 五 函数 六 流程控制 MySQL这个软件想将数据处理的所有事情,能够在mysql这个层面上 ...