Vuecli脚手架/前端解决跨域/属性穿透/环境变量配置

江河i

已于 2024-05-08 16:34:54 修改

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： vue.js javascript html

于 2021-04-22 11:01:53 首次发布

本文链接：https://blog.csdn.net/z18237613052/article/details/115803349

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Vue.cli的安装和运行

cli命令行界面(Command Line Interface)-g全局安装以后就不用重复安装

npm install -g @vue/cli

检查版本号

  vue -V 或vue --version

创建一个项目vue create

vue create hello-world

然后跳出这个选第三个(自定义选择功能)

? Please pick a preset: (Use arrow keys)
  first ([Vue 2] babel, router, vuex)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

选择需要安装的功能（依赖/包）:最基础的两个选项是第一个和第二个；后期可以根据项目需求，安装 Router 和 Vuex; 以及其他的包
在这里插入图片描述
选择vue的版本号：选择的是 2.x 版本

是不是用history模式来创建路由
[在url中 hash 带了一个很丑的 # 而history是没有#的]
(所以为了地址的好看,我们选是Y)

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

项目相关的一些配置文件存放的目录：默认选择第一个In dedicated config files ：放到独立的文件中进行存储
在这里插入图片描述
是否保存为预设：就是保留历史即使，以便下次直接使用; 可以根据自己需求来定; y:保留预设； n: 不保留

Save this as a preset for future projects? (y/N)

如果选择保留预设，则会提示输入预设的名字：名字是自定义的，英文格式

? Save preset as:

开始安装
安装成功后，可以运行项目

8.  cd myapp  // 进入项目文件夹
  yarn serve  // 启动项目

项目启动成功，在浏览器中访问: 访问的地址：

localhost:8080/
172.16.2.100:8080/

把里边的内容清空，保留一个干净的项目框架，后期可以直接使用，直接npm i

注意:当vue3+ts时

下面简单说一下选择不同的配置项会出现的不同的情况：

TypeScript：这里询问的是是否使用class风格的组件语法，如果在项目中想要保持使用TypeScript的class风格的话，大家选择y。

Use class-style component syntax? n

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

使用Babel与TypeScript一起用于自动检测的填充?这里一定要选择y

Use history mode for router? (Requires proper server setup for index fallback in production)  y

路由是否使用history模式？如果项目中存在要求就使用history(即:y)，但是一般还是推荐大家使用hash模式，毕竟history模式需要依赖运维。

vue 的UI界面

运行命令浏览器会跳出vue可视化界面

vue ui

在这里插入图片描述
运行

npm run serve

浏览器输入localhost:8080
在这里插入图片描述
具体看vue生态系统中的vue cli 页面讲解

编辑器需要安装一个插件 Vetur
作用:可以让.vue的文件高亮显示,和用快捷方式

删除或者修改预设步骤

被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。
每个人或许不一样

C:\Users\姓名 -->.vuerc

在这里插入图片描述

src文件夹讲解

src文件夹下可以完成很多操作

assets文件夹里面可以存放css/图片等静态资源文件

components(组件)
是注册template模板的地方

router路由配置文件夹
是进行路由跳转的地方,跳转component(注册)就在这里完成

	new Router({
  mode: 'history', // 访问路径不带#号
  base: '/page/aa',  // 配置单页应用的基路径
});

app.vue当前页面的主要入口(或叫加载的第一个组件)

const routes = [{
        path: '/',
        name: 'Home',
        component: Home,
        children: [{
                path: 'classRoom',
                name: 'classRoom',
                component: () =>
                /(为该路由生成一个单独的块,在访问路由时惰性加载的。节省资源)
                    import ('@/components/classRoom.vue')
            }]
    }]

views(视图)文件夹项目自带的页面级组件

src下store：存放 vuex(状态管理) 为vue专门开发的状态管理器

main.js作用所有的要用到全局的比如说 vue 、router、初始页面app 、 ElementUI。。。。
都需要导入和定义
作用：
是初始化vue实例并使用需要的插件
并且将你的内容渲染到主页面上
是你的项目的入口文件
它执行的时候都是从你的 main.js 从上到下的执行的

初始内容介绍

import Vue from 'vue' // 引入VUE核心库

import App from './App.vue'  // 引入一个当前目录下的名字为App.vue的组件

Vue.config.productionTip = false;  // 是否要在生产环境当中给予提示功能。

new Vue({  // 生成一个VUE实例

  render: function (h) { return h(App) },  // 渲染函数,将组件App渲染到挂载的元素上。
  
}).$mount('#app')  //这个 #app 是挂载在 public 主页面上的，你打开index 就会看到 这个元素 id

插件的使用 vuex为例

首先我们要下载好 vuex 插件
然后就是初始化 vuex，就是将 vuex 添加到我的项目中来，你光安装了还需要引用才能使用呢
当然，新创建完成项目的时候会自动引入，但是当我们新添加的要自己引入

在这里插入图片描述
assets与static的区别
assets中的文件会经过webpack打包，重新编译，推荐该方式。而static中的文件，不会经过编译。

Vue中public和assets的异同(静态资源目录)

相同点
两个目录都可以用来放置静态资源。

不同点
public目录用来放不会变动的文件。public下的文件不经过webpack处理，打包后会被直接复制到dist文件夹。（需要使用绝对路径来引用这些文件）

assets目录用来放可能会变动的文件。assets下的文件会被webpack解析为模块依赖。（需要使用相对路径来引用对应文件）

建议
将一些外部第三方的文件放在public中，自己的文件放在assets中。
图片引用时，放在public和assets都可以，需要注意的是：在动态绑定中，assets路径的图片会加载失败（webpack采用commenJS规范，必须使用require引入）

需要知道的
后期会在src目录下建 utils 文件
说明**😗* 封装公共方法,进行全局调用
在这里插入图片描述

统一介绍

├── README.md            项目介绍
├── index.html           入口页面
├── build              构建脚本目录
│  ├── build-server.js         运行本地构建服务器，可以访问构建后的页面
│  ├── build.js            生产环境构建脚本
│  ├── dev-client.js          开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│  ├── dev-server.js          运行本地开发服务器
│  ├── utils.js            构建相关工具方法
│  ├── webpack.base.conf.js      wabpack基础配置
│  ├── webpack.dev.conf.js       wabpack开发环境配置
│  └── webpack.prod.conf.js      wabpack生产环境配置
├── config             项目配置
│  ├── dev.env.js           开发环境变量
│  ├── index.js            项目配置文件
│  ├── prod.env.js           生产环境变量
│  └── test.env.js           测试环境变量
├── mock              mock数据目录
│  └── hello.js
├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src               源码目录  
│  ├── main.js             入口js文件
│  ├── app.vue             根组件
│  ├── components           公共组件目录
│  │  └── title.vue
│  ├── assets             资源目录，这里的资源会被wabpack构建
│  │  └── images
│  │    └── logo.png
│  ├── routes             前端路由
│  │  └── index.js
│  ├── store              应用级数据（state）
│  │  └── index.js
│  └── views              页面目录
│    ├── hello.vue
│    └── notfound.vue
├── static             纯静态资源，不会被wabpack构建。
└── test              测试文件目录（unit&e2e）
  └── unit              单元测试
    ├── index.js            入口脚本
    ├── karma.conf.js          karma配置文件
    └── specs              单测case目录
      └── Hello.spec.js

vue文件渲染执行过程

在这里插入图片描述

懒加载

懒加载的使用地方

（1）路由懒加载

export default new Router({
  routes:[
    {
     path: '/user',
     name: 'user',
      //懒加载
     component: resolve => require(['../page/user.vue'], resolve),
    },
  ]
})

（2）组件懒加载

components: {
  historyTab:resolve => {
  require(['../../component/historyTab/historyTab.vue'],resolve)
  },   
},

（3）全局懒加载

Vue.component('mideaHeader', () => {
 System.import('./component/header/header.vue')
})

属性穿透 /deep/

两个不同的vue文件相同的类名,只要加了scoped,就不会受影响

home.vue
<style scoped>
.main {
  color: red;
}
</style>
about.vue
<style scoped>
.main {
  color: green;
}
</style>

在这里插入图片描述

语法:
外层容器 >>> 组件 { }

常用 Element设置
场景:对element的某一个页面进行样式的改变,全局element不改变

<style scoped>
.el-input__inner//是element的固有标签
::v-deep .el-input__inner {
  width: 70px;
}
.main ::v-deep .el-input__inner {//前面加不加选择器都会生效
  width: 70px;
}
</style>

<style scoped>
>>> .el-input__inner {
  width: 170px !important;//即使这里加了!important也不会影响到全局的样式,只会在本页面生效,不加scoped怎么写都不生效
}
</style>

Vue使用@import 引入样式文件全局污染、使用scoped失效问题
import css时如下
在这里插入图片描述

1、styles的样式穿透使用 >>>

备注: 不太推荐使用这种方式,据说有点问题！

.wrapper >>> .swiper-pagination-bullet-active {
   		background: #fff
}

2、sass 和 less 的样式穿透

这俩个常用的样式穿透的方式有两种分别是 /deep/ 与 ::v-deep

外层容器 /deep/ 组件 { }

外层容器 ::v-deep 组件 { }

::v-deep 与 /deep/ 都是深度选择器(样式穿透)，都能实现对组件内部的样式修改；但是具体有什么区别，公司同事主张使用 ::v-deep，说是能加快编译速度，但是我在网上没有找到相关资料,使用上就是如果你用 /deep/ 没有生效,换一种试试 ::v-deep 一般都是可以的.

.Userdescriptions /deep/ .ant-descriptions-item-content {
  border-color: #fff !important;
}

.userstatus ::v-deep button {
  height: 25px;
}
::v-deep .ant-switch::after {
  height: 21px;
  width: 21px;
}

Less 和 sacc 都可以进行样式叠加的写法

使用样式穿透的时候写法会有些不一样

还是上面的样式使用叠加的方式在写一次

.userstatus ::v-deep {
  button {
    height: 25px;
  }
  .ant-switch::after {
    height: 21px;
    width: 21px;
  }
}

环境变量规范

在这里插入图片描述

    前端                            后端                数据库
    开发环境 development： ===》    开发环境         ====》 开发的数据库   （研发） 
    vueCli : npm run serve

    生产环境 product ======》       生产环境         ====》 生产环境的数据库  （项目上线）
     vueCli : npm run build

    测试环境 test =====》           测试环境           ====》 测试的数据库
     可以自行配置或者使用 vueCli 进行安装单元测试功能

比如：
开发环境服务器： 3000

生产环境服务器： 4000

测试环境服务器： 5000

配置环境变量：需要在项目的根目录下创建环境变量配置文件： .env.xxx 命名的文件
开发环境变量 .env.development
生产环境变量 .env.production

如果你的环境文件需要在所有的地方使用:则直接在根目录下创建一个 .env 的文件即可

  环境变量文件格式：
        .env                # 在所有的环境中被载入
        .env.local          # 在所有的环境中被载入，但会被 git 忽略
        .env.[mode]         # 只在指定的模式中被载入
        .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

文件内容的格式：
固定前缀是 VUE_APP_变量名 = value

例如:   VUE_APP_BASEURL = http://localhost:3000

获取环境变量：

   process.env.环境变量名 可以获取环境变量的值
const instance = axios.create({
    // baseURL:"http://localhost:3000"//原来写法默认地址
    baseURL:process.env.VUE_APP_BASEURL
})

命令行的配置（package.json文件中）

使用默认配置
    "scripts": {
        "serve": "vue-cli-service serve ",  // npm run serve 执行的是 开发环境
        "build": "vue-cli-service build ",  // npm run build  执行的是 生产环境
        "test":"vue-cli-service build --mode test "  // 通过  --mode 选项参数 覆盖默认模式  --mode 环境名
    },

  通过 --mode 选项覆盖 默认模式：
     "scripts": {
        "serve": "vue-cli-service serve --mode development ",
        "build": "vue-cli-service build --mode production",
        "test":"vue-cli-service build --mode test "
    },

指定vue打开端口
在src同级新建文件vue.config.js

module.exports = {
    configureWebpack: {
        devServer: {
            port: 520
        }
    }
}

运行后可以看到
在这里插入图片描述

vue设置反向代理(前端解决跨域)

开发环境参考网址: https://www.jianshu.com/p/a2e3147c2af2

环境变量：开发环境 development，生产环境 production，测试环境 test

开发和生产解决跨域的方法
开发环境：用 proxy
生产环境 : nginx 反向代理解决跨域(这个下面没写例子)

注意:生产环境下,开发环境配置的 vue.config.js 会被忽略

生产环境解决跨域例子

反向代理用来解决前端跨域问题
vue-cli 项目的package.json的同级设置文件夹 vue.config.js 进行如下设置即可：

module.exports = {
    devServer:{
        proxy:'https://m.douyu.com/api'
    }
}

在页面中请求使用只要拼接路径就好

//例如
axios.get('/cate/recList?cid=&ct=').then(res => {
            console.log(res.data);
        })

其它不用多设置,实际拼接后如下

https://m.douyu.com/api/cate/recList?cid=&ct=

proxyTable

服务端请求服务端不存在跨域,浏览器请求才会出现跨域

proxyTable 是 vue-cli 脚手架在开发模式下,为我们提供的一个跨域的代理中转服务器服务.基于 (http-proxy-middleware插件).

因为代理服务器不是浏览器,它没有同源策略的限制.

在这里插入图片描述
正常情况下,我们无法通过ajax向后台请求到数据.因为跨域了.浏览器的同源策略,截获了这次数据的返回,没有给vue.

解决办法有两个:

服务器开启 cors (最简单,也是最方便的),后端解决
用代理服务器中转一下(vue请求的还是自己的后台,让后台去请求真实数据的后台,然后再将数据返回给vue)

在了解到了基本原理之后,就可以看看 proxyTable 这个节点的一些配置属性了.
(npm run serve 可以直接调用 vue.config.js 文件)

module.exports = {
    devServer: {
        proxy: {
            // 一旦服务器接收到 /api/xxx 的请求，就会把请求转发到另一个服务器
            // 浏览器和服务器之间有跨域，但是服务器和服务器之间没有跨域
            '/api': {
                target: "http://localhost:3000",
                pathRewrite: {
                    '^/api': ''
            // 发送请求时，这样写完整  http://localhost:3000/api/books
            //实际的地址是这样的http://localhost:3000/books(但你看控制台就不是想要看到的结果)
                }
            },
        }
    }
}

vue.config.js详细配置
需要通过公共的请求前缀进行区分: 公共的请求前缀可以和后端约定，自定义; 在请求的接口前边添加上公共前缀

proxyTable: {
      // 这里配置 '/api' 就等价于目标 target , 你在链接里访问 /api === http://localhost:54321
      '/api': {
        target: 'http://localhost:54321/', // 真实服务器的接口地址 // http://localhost:54321/json.data.json,
        secure: true, // 如果是 https ,需要开启这个选项
        changeOrigin: true, // 是否是跨域请求?肯定是啊,不跨域就没有必要配置这个proxyTable了.
        pathRewirte: {
          // 这里是追加链接,比如真实接口里包含了 /api,就需要这样配置.
          '/^api': 'api/', 
          // 等价于 
          // 步骤1  /api = http://localhost:54321/
          // 步骤 2 /^api = /api + api == http://localhost:54321/api
        }
      }
     }

vuecli中使用正则

正则表达式.test(数据比如手机号码)

/^1[1356789]\d{9}$/.test(this.phone)//验证手机号

/^[\u4e00-\u9fa5]{0,}$/.test(nickname)//验证汉字

delete和vue.delete的区别

<template>
    <div>delete和vue.delete的区别</div>
</template>
<script>

export default {
  data () {
    return {
      arr1: [1, 2, 3],
      arr2: [1, 2, 3]
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      delete this.arr1[0]
      console.log(this.arr1) // [empty, 2, 3]

      this.$delete(this.arr2, 0)
      console.log(this.arr2) // [2, 3]
    }
  }
}
</script>

delete会删除数组的值，但是它依然会在内存中占位置

vue.delete会删除数组在内存中的占位

使用elementui

官网链接
 自定义主题色步骤

vue中下载本地xls模板

vue项目中a标签下载excel文件

江河i

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vuecli脚手架/前端解决跨域/属性穿透/环境变量配置

这里写目录标题Vue.cli的安装和运行安装一个插件,之前学js用到控制台现在学vue用到这个插件好比学js时的控制台谷歌极简插件下载vue.devtools如果安装不能用看这个人的博客https://blog.csdn.net/sunhl951/article/details/80185628Vue.cli的安装和运行cli命令行界面(Command Line Interface)npm install -g @vue/cli检查版本号 vue -V 或vue --version
复制链接

扫一扫