工欲善其事必先利其器,安装所需环境node和npm的安装
首先需要安装node环境,直接到官网下载安装包 https://nodejs.org/zh-cn/
安装node默认安装npm, 不需要重复安装npm。安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。下载dev-tool工具
为了以后调式做准备 https://github.com/vuejs/vue-devtools#vue-devtools安装全局vue-cli脚手架
npm install -g vue-cli
出现如下问题:
npm ins...
一、需要了解的基本知识node.jsNode.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O模型...
一、配置与安装步骤: 1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2、在 config 文件夹中创建 rem.js: 3、将以下代码复制到 rem.js 中:(function(){function a(){var b=document.documentElement.clientWidth;b=b>750?750:b;var c=b/750*100;document.getElementsByTagName("html")[0].style.fontSize=c+"px"}a();window.onresize=a})(); 4、在 src 文件夹下的 main.js 中引入:import ‘./config/rem‘ 5、在 Vue ...
我们每次新建一个项目的时候会发现在项目中会有这么俩个相似的文件,并且一个里边东西很多一个里边的东西很简洁,那么他们到底有什么区别与联系。 npm5之前的版本,是不会生成package-lock.json这个文件的。npm5版本及以后,才会生成package-lock.json文件;当使用npm安装包的时候,npm都会生成或者更新package-lock.json文件,npm5版本及以后的版本,在安装包的时候,不需要加 --save(-s) 参数,也会自动在package.json中保存...
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解。1.先看vue项目打包(我这里使用的是vscode开发工具)这里是我的项目结构:打包之前需要修改如下配置文件:配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)配置文件二:config>>index.js(修改assetsPublicPath:‘./‘ ,修改目的是为了解决js找不到的问题)上面两步修改完成之后就...
Vue 代码层面的优化;webpack 配置层面的优化;基础的 Web 技术层面的优化。一、代码层面的优化1.1、v-if 和 v-show 区分使用场景v-if?是?真正?的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
v-show?就简单得多, 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 的...
问题描述:前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api服务器的ip修改了,改动只是更新下这个url,但是却需要会到前端源码,url后,在重新npm run build,然后再把整个dist再重新传到前端服务器,才可以。解决方法:用了generate-asset-webpack-plugin 这个插件,在webpack.prod.conf.js中去生成configServer.js...
例如在修改属性值的时候 this.$set(this.curPlayList[this.curClickDevice.wndNum], ‘description‘, rsp.Message.returnMsg || ‘播放异常‘) 页面数据curPlayList并没有发生变化,最后解决方案是在后面添加this.$forceUpdate(),进行强制更新。在某些文件,没有this,那就用Vue.$forceUpdate() 原文:https://www.cnblogs.com/luoxuemei/p/13745753.html
1:首先 查看node 版本node -v npm install stable 3:初始化 vitejs 然后就会叫你选择 语言直接选 vue-ts 然后cd 进入项目 初始化即可 npm init @vitejs/app 项目名称:vite-vue3-ts cd vite-vue3-tsnpm installnpm run dev 打开成功这个页面就说明成功了 4:打开项目 打开 vite-config.ts 文件,修改指向目录import { defineConfig } from ‘vite‘
import vue from ‘@vitejs/plugin-vue‘
import { resolve } ...
项目开发完了以后,肯定是要打包的,不然也就失去了项目存在的意义。 上图中的build就是打包的,它会根据你的配制文件生成一个目录,然后目录中就是最终生成的文件,上传到服务器,就可以运行。 但是,一般都是存在各种各样的问题,比较说路径问题,这个是常见的问题。 这个是vue.config.js1、目录路径(静态资源)问题publicPath: 这个是访问的根目录,一开始是/ outputDir:这个是生成的文件放在那个目录下面,如果叫abc,那么生...
在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包,来回很是麻烦,今天网上翻看到一个很好的方法可以解决这个问题,也是由于对webpack工具不是很了解,其实这个工具已经提供了解决方案.参考网站:http://blog.csdn.net/gebitan505/article/details/58166055;在config文件夹里面有三个js文件...
业务逻辑 通过gitee创立各个分支,比如swiper,header,recommende等分支,其实就是整个页面上的每个模块。模块化是公司级别项目开发的基准,每个人在各自的分支上进行代码的编写,而对主分支master没有影响。故master分支一般是承载着项目作为基本的代码。 在本个vue的项目中,其页面模板是存储在以下路径 Home.vue作为根模板起到了一个对于别的小模块的整合作用。需要引入模块,在template元素下要使用div进行一个根标签的...
使用HBuilderX实现打包vue项目成app:https://www.cnblogs.com/wuzhiquan/p/10594855.html 一、准备开发工具开发工具:HBuilderX官网地址:http://www.dcloud.io(标准版需要自己安装插件,app开发版已经把app开发常用的插件安装好了,开箱即用,建议使用开发版)二、打包生成一个vue项目就拿手头上一个vue项目进行打包,vue项目预览如下:打包生成的项目结构:三、创建HBuilder的app项目(请先注册HBuilde账号并登录,打包的时候需...
在webpack构建的vue项目中,当我们想要使用一个组件时,需要先将组件引入,例如“import List from ‘@/pages/list/list‘”,这时我们都是用@作为起始位置,其实@代表了src路径。 那么有没有办法我们自己来定义一个别的路径,或者将@重命名呢?当然是可以的 首先,打开build下的webpack.base.conf.js文件,我们可以看到alias重命名这一项。 resolve: { extensions: [‘.js‘, ‘.vue‘, ‘.json‘...
列表进入详情页的传参问题本地开发环境请求服务器接口跨域的问题axios封装和api接口的统一管理UI库的按需加载如何优雅的只在当前页面中覆盖ui库中组件的样式定时器问题rem文件的导入问题Vue-Awesome-Swiper基本能解决你所有的轮播需求打包后生成很大的.map文件的问题fastClick 的300ms延迟解决方案组件中写选项的顺序路由懒加载(也叫延迟加载)开启gzip压缩代码详情页返回列表页缓存数据和浏览位置、其他页面进入列表页刷洗数据的...