Vue技术点整理-vue.config.js

1,proxy代理解决本地开发环境跨域问题配置proxy代理后,proxy会将任何未知请求 (没有匹配到静态文件的请求) 代理到 https://192.168.3.49:8080 vue.config.js配置 devServer: { proxy: { '/edu-api': { target: `https://192.168.3.49:8080`, changeOrigin: true, } } } 业务请求代码 axios.get("/edu-api/userList")…

Vue技术点整理-Vue Router

路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库一,Vue Router 在项目中的安装引用 1,在页面中使用<script>快速使用Vue Router开发 <!doctype html> <html> <head> <meta charset="utf-8"> <title>使用script直接引入Vue Router&l…

Vue技术点整理-Vue CLI

Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进行快速开发GitHub示例地址 vue-ht-cli 一,vue.config.js配置文件默认Vue CLI安装完成后,是没有这个配置文件的,需要手动在项目根目录创建,并修改使用: 以下为我简单配置的文件,更多详细配置,请参考 Vue CLI官网 vue.config.js module.exp…

Vue技术点整理-Vue CLI安装详解

一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI npm install -g @vue/cli # OR yarn global add @vue/cli 安装之后,使用以下命令查看安装是否正确 vue --version 2,快速创建一个CLI项目 vue create cli_test 此时会出现以下安装选项: 选择安装选项 PS E:\wo…

Vue技术点整理-前言

前言 Vue版本说明:本文档编写时,Vue稳定版本为 2.6.10 本文档编写目的为:整理Vue相关生态的技术点.和开发中经常使用到的技术点,让开发者快速上手开发,提升开发效率一,Vue开发工具:本人使用Hubilder X开发工具(Vue特别赞助商 ),选择合适自己的开发工具即可: 例如:vscode.WebStorm.sublimetext等任何文本工具都可进行开发二,目录介绍: 1,Vue技术点整理-安装引入 2,Vue技术点整理 vue-devtools 3,Vue技术点整理-Vue…

🏃‍♀️点亮你的Vue技术栈，万字Nuxt.js实践笔记来了~

前言作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮. Nuxt.js 是什么 Nuxt.js 官方介绍: Nuxt.js 是一个基于 Vue.js 的通用应用框架. 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染. 我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js. Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需…

vue --- 解读vue的中webpack.base.config.js

const path = require('path') const utils = require('./utils')// 引入utils工具模块,具体查看我的博客关于utils的解释,utils主要用来处理css-loader和vue-style-loader的 const config = require('../config')// 引入config目录下的index.js配置文件,主要用来定义一些开发和生产环境的属性 const vueLoaderConfig = require('…

Vue技术点整理-安装引入

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架所谓渐进式是指: 1,如果你有一个现成的web应用,你可以将vue作为该应用的一部分嵌入其中,带来更丰富的交互体验 2,如果你需要更多业务逻辑要放到前端处理,那么Vue的核心库以及生态系统,也可以满足各样的需求一,将vue作为部分嵌入其中,在页面中使用<script>快速引用并开发 <!doctype html> <html> <head> <meta charse…

Vue技术点整理-Vuex

什么是Vuex? 1,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 2,每一个 Vuex 应用的核心就是 store(仓库)."store"基本上就是一个容器,它包含着你的应用中大部分的状态 (state) 3,其实也就是,应用中各个组件之间共享状态的一个状态库,并可以时时映射到视图什么时候用的到Vuex? 1,如果你需要构建一个大中型应用的时候,会使用到很多组件嵌套,很多业…

Vue技术点整理-指令

我们通常给一个元素添加 v-if / v-show 来做权限管理,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余. 针对这种情况,我们可以通过全局自定义指令来处理:我们先在新建个 array.js 文件,用于存放与权限相关的全局函数: // array.js export function checkArray (key) { let arr = ['1', '2', '3', '4', 'demo'] let index = arr.indexOf(key) if (i…

Vue技术点整理 vue-devtools

注:默认浏览器调试工具,在调试vue的页面时,是不能看到vue项目的属性状态值的,所以最好是在浏览器上安装 vue-devtools,这样就可以在浏览器里面审查和调试vue的应用了 1,Chrome浏览器(需要FQ) https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 2,火狐浏览器 https://addons.mozilla.org/en-US/firefox/ad…

vue 源码学习----build/config.js

1. process 这个process是什么?为何都没有引入就可以使用了呢? process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程.作为一个对象,它对于 Node.js 应用程序始终是可用的,故无需使用 require(); 那procee.env呢?是啥? process.env属性返回一个包含用户环境信息的对象 2. builds 编译的对象的配置,蓝色框框起来的是对此对象的注释,这个的解释就是只运行时(CommonJS). 使用bundl…

vue-ueditor-wrap报错，vue ueditor 加载ueditor.config.js失败,请检查您的配置地址UEDITOR_HOME_URL填写是否正确!

1.第一次报错后,仔细看了官方文档,少了第一步,下载UEditor源码,放到public目录(前提你用的是vue-cli 3.x的版本). 好那就下载,下载的是vue-ueditor-wrap作者修复的版本,选择了下面这个版本. 2.放进去后,还是报错,WTF!,看了好多地方,看了看报错的文件路径,没问题啊!确定没问题啊,就是这个路径啊,可是就是打不开这个路径!郁闷 3.还是路径有问题,根据项目里的ip.js看到了问题这个ip.js就可以打开,所以还是你的路劲配的不对! 4. 给组件添加配置属…

前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会替换原有的,原有的必须删除,不能刷新. ③ 在其他的设备上使用的时候,也要安装软件. B/S :浏览器和服务器(Browser/Server)架构 B/S 软件的特点: 不需要安装任何的客户端,是通过浏览器输入网址打开的. 更新的时候不需要重新安装软件,你只需要刷新页面,程序就能更新. 在其他设备端…

【webpack4.0】---base.config.js基本配置(五)

一.创建项目初始化 1.初始化项目npm init -y 2.创建 src (用来存放开发环境的代码)文件夹. config (用来存放webpack的配置项)文件夹 3.安装webpack Webpack-cli 二.base.config.js文件 config文件夹下创建base.config.js 1.基本配置 constpath=require("path");//定义入口文件路径和出口文件路径constPATH={ app:path.join(__dirname,&…

整理Vue.js 面试题

Vue.js 面试题整理 Vue项目结构介绍 build 文件夹:用于存放 webpack 相关配置和脚本. config 文件夹:主要存放配置文件,比如配置开发环境的端口号.开启热加载或开启gzip压缩等. dist 文件夹:默认命令打包生成的静态资源文件. node_modules:存放 npm 命令下载的开发环境和生产环境的依赖包. src: 存放项目源码及需要引用的资源文件. src下assets:存放项目中需要用到的资源文件,css.js.images 等. src下compone…

vue 调用常量的config.js文件

我遇到问题,就是有很多常量需要应用的项目里面.所以需要打算设置一个config.js文件 1.填写config.js 文件 //常量配置 //快递公司名单对应的页面为: src/pages/other/kuaidi/index.vue export const kdcompanyOptions=[ {value: "shunfeng", label: "顺丰"}, {value: "shentong", label: "申通"…

公司内部技术分享之Vue.js和前端工程化

今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和React.js.Angular.js并驾齐驱号称前端三大框架(前端最常用的这三大框架,大中小公司均采用).Vue.js是一个叫尤雨溪及其他的团队开发的,不过早年是他自己独立做出来的.这一点我觉得他很牛逼.我觉得每个做开发的朋友们,都要有一个自己的开源项目,自己的开源项目可以是自己工作三到四年发现有很多地…

vue3.0 vue.config.js 配置实战

今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如设置代理,打包配置等问题呢? vue cli3.0项目中需要配置其他参数时,需要新建文件'vue.config.js',(这文件名是固定这么写的),与package.json在同一级目录下. module.exports = { // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根…

vue cli3.3 以上版本配置vue.config.js

// vue.config.js 配置说明//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions// 这里只列一部分,具体配置参考文档module.exports = { // 部署生产环境和开发环境下的URL. // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上 //例如 https://www.my-app.com/.如果应用被部署在一个子路径上,你就需要用这个选项指定这个子…

vue.config.js常用配置

使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置 module.exports = { // 选项... } 基本路径 baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代. 在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值 module.exports =…

Vue、webpack中默认的config.js、index.js 配置详情

在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionS…

减少打包组件vue.config.js——Webpack的externals的使用

vue.config.js module.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter', axios: 'axios' } } } 在index.html文件中引入CDN <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <…

vue-cli3的vue.config.js文件配置，生成dist文件

//vue.config.jsonconst path = require('path'); // const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入移动端模拟开发者工具插件 (另:https://github.com/liriliri/eruda) // const CompressionPlugin = require('compression-webpack-plugin'); //Gzip // const…

【vue-cli 3.0】 vue.config.js配置 - 路径别名

如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以全部统一在vue.config.js中,很方便有没有,从此以后一个配置文件走遍公司大小项目,妈妈再也不用担心我每次新建项目时重新配置各个复杂的选项了.那么怎么在vue.config.js中配置路径别名呢? 1. 创建项目 2. 在根目录下新建 vue.config.js 3. 修改vue.confi…

Vue Cli 3：vue.config.js配置文件

Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载. 你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写. 一查看Vue Cli版本 vue --version 3.5.1 二创建vue.…

vue.config.js配置前端代理

// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分,具体配置参考文档 module.exports = { // 部署生产环境和开发环境下的URL. // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上 //例如 https://www.my-app.com/.如果应用被部署在一个子路径上,你就需要用这个选项指定…

Vue-Cli 3.0 + vue.config.js

虽然一直没有亲手搭建过vue项目,但是2.0的时候就开始自学(但并没有实践项目).然后公司最近有个人用3.0做了个项目,公司让我参与进去,我就顺便学习了一把3.0.(美滋滋) 因为电脑的环境还是之前自学时候的2.0,因此现在需要先升级到3.0.下面是具体步骤: 1. npm uninstall -g vue-cli 2. npm install -g @vue/cli 3. vue create [new-dir] //进去后会有一些选择让你做,我选的default,然后下载用选npm 4…

vue.config.js添加路径别名

在组件库中添加配置文件后其它文件需要引用它,此时想到利用路径的别名比较方便,相当于缩写了,请看下面的添加过程: (一)在vue.config.js文件中添加的内容如粗体字体所示: const path = require('path') const CopyWebpackPlugin = require('copy-webpack-plugin') function resolve (dir) { return path.join(__dirname, '.', dir) // 这里采用一个点,…

Vue-cli3 项目配置 Vue.config.js( 代替vue-cli2 build config)

Vue-cli3 搭建的项目界面相对之前较为简洁之前的build和config文件夹不见了,那么应该如何配置如webpack等的配那只需要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录) 语法 module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true,…

【Vue技术点整理-vue.config.js】的更多相关文章