Vue
互联网切图仔
这个作者很懒,什么都没留下…
展开
-
基于腾讯地图+Ant-Design-Vue封装省市区联动查询组件
一、腾讯地图key申请附上教程:腾讯地图key申请二、在项目加载JS API在VUE项目的pubilc文件夹下的index.html中加入<script src="https://map.qq.com/api/gljs?v=1.exp&key=你申请的key"></script>三、组件封装1、在src>components文件夹下新建MyMap.vue2、代码如下:<template> <div> <div原创 2021-11-03 15:36:06 · 1392 阅读 · 2 评论 -
Vue切换语言(vue-i18n插件)
1、安装插件npm install vue-i18n2、新建语言内容切换的配置文件3、配置文件内容(1)language-en.jsmodule.exports = { title: 'VueI8n usage example', userName: 'userName', pwd: 'password'}(2)language-zh.jsmodule.exports = { title: 'VueI8n使用', userName: '用户名', pwd: '密原创 2021-10-13 12:01:30 · 256 阅读 · 0 评论 -
Vue学习篇-9、vue3+vite+ant-desigin-vue项目工程化
项目地址项目地址后续会出相关笔记和对项目进行优化,敬请期待原创 2021-07-25 14:01:43 · 161 阅读 · 0 评论 -
实习随笔-12、Vue打包压缩配置
一、安装npm i compression-webpack-plugin@5.0.1npm i image-webpack-loadernpm i webpack-bundle-analyzer -D二、项目根目录下创建vue.config.js1、gzip配置项目const CompressionWebpackPlugin = require('compression-webpack-plugin');module.exports = {configureWebpack: conf原创 2021-01-25 17:40:11 · 210 阅读 · 0 评论 -
实习随笔-11、Vue实现PC端自适应方案
一、安装npm i lib-flexible -Snpm i px2rem-loader -Dnpm i postcss-plugin-px2rem二、进入node_modules,打开lib-flexible/flexible.js,修改 refreshRem()函数,如下if (width / dpr > 1920) { width = 1920 * dpr; } if (width / dpr < 1300) {原创 2021-01-25 17:23:12 · 426 阅读 · 0 评论 -
实习随笔-10、process.env前端环境变量配置教程
一、实现原理采用nodejs顶层对象中的process.env(进程环境,返回一个包含用户环境信息的对象。)属性,根据各个环境的配置文件区分和切换环境二、具体操作(以vue项目为例)1、安装依赖npm install process2、在根目录新增区分环境的文件例如:开发环境:.env.dev预发布环境:.env.pre生产环境:.env.product.devNODE_ENV = 'development'VUE_APP_TITLE = 'development'/*请求接口地原创 2020-12-02 10:57:54 · 513 阅读 · 0 评论 -
Vue学习篇-8、使用vue/uni-app搭建微信小程序
一、创建项目1、打开powershell,输入下方命令创建项目vue create -p dcloudio/uni-preset-vue dnpicture2、选择默认模板3、在项目目录下,安装sass依赖npm install sass-loader node-sass二、打开项目1、运行项目npm run dev:mp-weixin2、打开微信开发者工具,预览项目导入文件路径:D:\code\vue\dnpicture\dist\dev\mp-weixin3、看到如下界面原创 2020-07-29 14:49:09 · 544 阅读 · 0 评论 -
Vue学习篇-1、在项目中安装和配置webpack
一、 运行 npm install webpack webpack-cli –D 命令,安装 webpack 相关的包二、 在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件三、 在 webpack 的配置文件(webpack.config.js)中,初始化如下基本配置:module.exports = { // 编译模式 mode: 'development' //development production}四、 在 package原创 2020-07-03 21:13:12 · 351 阅读 · 0 评论 -
Vue学习篇-2、配置webpack自动打包功能
一、打开vscode终端 运行 npm install webpack-dev-server –D 命令,安装支持项目自动打包的工具-----------------提醒一下:使用npm命令需要安装node.js----------------------------二、修改 package.json -> scripts 中的 dev 命令如下: "scripts": { "test": "echo \"Error: no test specified\" &&原创 2020-07-04 09:27:47 · 231 阅读 · 0 评论 -
Vue学习篇-3、配置 html-webpack-plugin 生成预览页面
当我们配置完webpack的自动打包功能后,希望访问localhost:8080/时,能够跳转到index.html页面,所以就需要配置生成预览页面原创 2020-07-04 09:53:43 · 896 阅读 · 0 评论 -
Vue学习篇-4、webpack 中加载器的使用--打包各类文件
一、打包处理css文件1、运行 npm i style-loader css-loader -D 命令,安装处理 css 文件的 loader2、 在 webpack.config.js 的module.exports-> module -> rules 数组中,添加 loader 规则如下:// 所有第三方文件模块的匹配规则 module: { rules: [ { test: /\.css$/, use: ['style-loader原创 2020-07-05 13:18:22 · 184 阅读 · 0 评论 -
Vue学习篇-5、配置vue单文件组件的加载器、webpack项目中使用vue以及使用webpack打包项目
一、webpack 中配置 vue 组件的加载器1、运行 npm i vue-loader vue-template-compiler -D 命令2、 在 webpack.config.js 配置文件中,添加 vue-loader 的配置项如下://头部区域导入下载的包const VueLoaderPlugin = require('vue-loader/lib/plugin');//module.exports->plugins添加插件 plugins: [new VueLoaderP原创 2020-07-05 13:18:40 · 311 阅读 · 0 评论 -
Vue学习篇-6、Parsing error: Unterminated regular expression
关于在eslint下,在vue组件中使用正则表达式的报错以及解决一、报错提示Parsing error: Unterminated regular expression二、代码:const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-]) +(/\.[a-zA-Z0-9_-])+/;三、解决办法const regEmail =/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/更换一原创 2020-07-06 22:52:02 · 6438 阅读 · 0 评论 -
Vue学习篇-7、Vscode安装Eslint插件+Prettier插件进行代码格式化
介绍格式化插件 ESLint。#ESLint 依赖安装 ESLint 依赖,然后根据提示一步步确认生成 .eslintrc.js 配置文件:npm i eslint -D./node_modules/.bin/eslint --init检测并格式化文件:./node_modules/.bin/eslint yourfile.js./node_modules/.bin/eslint yourfile.js --fix个人更喜欢 ESLint + Prettier 的组合,安装对应的依赖:n原创 2020-07-08 22:09:56 · 1898 阅读 · 0 评论