-
vue项目打包步骤
2018-06-25 01:04:39vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变,如下图:点击index.html,通过浏览器运行,出现以下报错,如图:那么应该如下修改呢?具体步骤如下:1、查看package.js文件的scripts命令2、打开...vue项目打包
一、终端运行命令 npm run build
二、打包成功的标志与项目的改变,如下图:
3、点击index.html,通过浏览器运行,出现以下报错,如图:
四、那么应该如何修改呢?
具体步骤如下:
1、查看package.js文件的scripts命令
2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件
3、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。
4、终端运行 npm run build 即可。此时点击index.html,通过浏览器运行便,会发现动态绑定的static的图片找不到,故static必须使用绝对路径。将图片路径修改为绝对路径,至此,打包完成。
五、温馨提示
更多博文,请关注:xssy5431 【小拾岁月】
扫码:
-
vue 关闭vue项目中烦死人的ESlint
2018-04-04 11:44:51【已解决】vue 关闭vue项目中烦死人的ESlint 很多时候,因为一些书写问题,ESlint会报错。目录
温馨提示:ctrl+alt+L可以规范代码格式,比Eslient更是随性一定,适合非强迫症,让那个比教导主任还严的ESlint滚粗
1 问题
每次都红我缩进,
每次都要改,太麻烦了
2 解决
2.1 创建项目避开ESlint
最好的办法就是创建项目的时候不要ESlint
好了!特别清爽的感觉!2.2 使用了别人模板,禁止Disable Eslient
2.3 使用了别人模板,卸载
说实话,以前我觉得Eslient很烦,
后来要维护别人的代码的时候,才发现Eslient很棒
最后的最后发现,理解Eslient的人,没有它也写得工工整整,不理解的朋友,全部代码都红都不会看一眼,伤害的只有自己
npm uninstall eslint --save
2.4 其他办法
2.4.1 关闭软件webstorm 的ESlint
file->settings->搜索ESlint->取消Enable的勾选
2.4.2 注释掉项目内的ESlint
项目目录下build.js->webpack.base.conf.js文件里面有段代码 注释掉!!!
-
搭建VUE项目(三)VUE项目实现页面跳转
2018-06-27 10:26:17打开一个VUE项目,目录结构是这样的:如现在有两个页面aaa和HelloWorld,路由配置在index.js中:import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import ...打开一个VUE项目,目录结构是这样的:
如现在有两个页面aaa和HelloWorld,路由配置在index.js中:
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import aaa from '@/components/aaa' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/aaa', name: 'aaa', component: aaa } ] })
现在在HelloWorld中点击按钮跳转到aaa,在aaa中点击按钮也可以返回到HelloWorld:
1、HelloWorld:
<div class="hello"> <h1>{{ msg }}</h1> <button @click="go">点我跳转</button> </div>
<script> export default { name: 'HelloWorld', data () { return { msg: '哈哈' } }, methods:{ go(){ this.$router.push('/aaa') } } } </script>
2、aaa:
<template> <div>我是aaa <button @click="back">点我返回</button> </div> </template> <script> export default { name: 'aaa', /*data () { return { msg: '哈哈' } },*/ methods:{ back(){ this.$router.push('/') } } } </script>
-
Vue.js教程-Vue项目的目录结构和.vue文件的构成
2020-07-28 00:59:54Vue.js教程-Vue项目的目录结构和.vue文件的构成前言Vue项目的目录结构(Vue-cli3/4版本).vue文件的构成Html区域(template)script区域export default区域style区域总结 前言 本章介绍vue项目的目录结构和一个.vue文件...Vue.js教程-Vue项目的目录结构和.vue文件的构成
前言
- 本章介绍vue项目的目录结构和一个.vue文件的三部分,分别是template、script和style。
- 上一篇文章说到为什么同样都是.vue文件,为什么存在于不同的文件夹下,下面先解释一下目录结构。
- 因为Vue属于单页面开发方式,构成这个页面的元素就是组件,各个小组件组成一个大组件,各个大组件组成这个页面,在实际操作中只需要刷新对应组件即可,节省了任务量。通俗一点解释就是:单页面作为一棵树的根结点,它的子结点就是大组件,子结点的子结点就是小组件,以此类推。
Vue项目的目录结构(Vue-cli3/4版本)
-
先看一下整体的目录,还是用上一篇的vue工程。
-
众所周知,源码都放在src文件夹里,其他的要么是配置文件,要么是项目里需要的相关依赖。
-
assets文件夹:经常有两个子文件夹,分别是CSS和icon(就是存图片的)。
-
components文件夹:顾名思义存的是组件,这种组件全是vue文件,但这里经常放的是能够在不同的项目中进行重复使用的组件,例如移动端开发的Tabbar,或者是PC端的左侧导航栏等等,在不同的项目中直接复制粘贴这个文件夹就能使用了,也是Vue组件化开发的一大特点,就是复用性高。
-
router文件夹:里面只有一个文件——index.js,里面可以配置路由,路由的两种跳转方式有hash和history,上篇文章里简要说了一下他俩最主要的区别,可以去看。代码可以照下面的方式去练习,我使用的是箭头函数,属于ES6中function的简便写法,后面会细说一下。path代表路径,redirect代表重定向,component代表在这个路径下出现的组件,属于组件化开发的直观体现。
-
store文件夹:这个文件夹是Vuex自动创建的,里面也有一个index.js,但这里默认有四个东西:
- state: 存公用的一些变量,例如登录信息啥的。
- mutations:其实就是methods,主要用于修改state里的数据。
- actions:进行异步操作,但还是通过mutations里的function操作state,不能直接修改state。
- modules:里面可以定义许多个module,每个module里也有state、mutations和actions,相当于一个小型的vuex,我是这么理解的,可以看大佬们的精细讲解。
-
view文件夹:就是存放大组件的,也就是构成这个单页面的最大子组件,里面也是vue文件。
-
App.vue:是vue文件,也就是这个项目的入口,经常配合router-view使用,router-view用于显示该路由对应的组件,相当于是给了一个显示组件的区域。
-
main.js:引入全局的一些东西,并初始化Vue,一般一个项目里只用初始化一个Vue,.$mount(’#app’)就是el : ‘app’,两者是同一个意思,只不过mount写在后面,el卸载大括号里面,都可以。一般自己后安装的插件想要全局使用的话都要在main.js进行使用,也就是
Vue.use(插件名)
,当然要先import,例如使用axios进行异步请求,但最好还是按需使用,不要全局使用,因为有些时候使用父传子或子传父就能够实现数据传递,这样只需要在大组件里使用即可达到目的。
.vue文件的构成
- 先创建一个vue文件,我创建的是Home.vue
Html区域(template)
- template里面只能有一个div,如果还需要div,可以在这唯一的div里进行使用,但最外层必须用div包上。
- 该组件的所有代码都会写在这个区域内,如果使用子组件只需要先import再使用,如何引入和使用会在下个部分讲。
script区域
- 在这里写js代码。
- 先解决如何确定父子关系,如图:
- 先在script区域内引入该组件,具体路径根据你创建的组件位置进行引入,然后在export default中的components写上引入的组件,此时父子关系确定了,因为Tabbar这个组件是位于Home组件内,所以Home是父组件,在html区域内直接写上
<子组件名>
这样就能让子组件在父组件中显示了。
export default区域
- 意思是将这里的东西默认抛出,这样在别的组件中可以使用这些东西,也就是在别的组件中可以完全引入。
- 里面经常有五个常用的东西:
- data:写法上面的图片有,具体的数据写在return里就行了,可以是数组、对象或者某个变量。
- computed:意思是计算属性,经常用于监控自己定义的变量啥的,处理相关数据并返回一个结果,例如购物车的总金额啥的。
- methods:就是一些方法,常见的是一些事件,向后台请求数据或传递数据,其实就是js的函数,这里可以定义多个函数。
- watch:经常用于监控vue实例,或监控父组件中data中数据改变的状况,经常用于同步刷新。
- components:就是引用子组件。
style区域
- 写Css的地方,因为存在复用的情况,所以这个区域被包含在这个组件中,一个组件移到另一个项目中可以直接使用,就不用自己写了。
- 好像也没别的了,还有就是用什么类型的Css,可以自己安装,例如sass啥的,都可以。
总结
- 主要是了解Vue的目录结构,如果哪里写的不全欢迎补充,也可以去看大佬们的博客进行学习,先了解每个文件夹都是干什么的,防止以后不好维护。
- 父子组件的传参和相关知识后面也会讲,先提一下混个脸熟就ok了。
-
vue项目访问顺序
2019-08-20 16:53:121.vue项目访问顺序 访问index.html后,main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。 2.mian.js(项目开始展示内容) import Vue from 'vue' import App from ... -
vue项目环境搭建及一个简单的vue例子
2018-03-22 18:11:36大家好,今天下午对于vue项目环境的搭建进行了研究,一直以来,我都是用cdn的方式将vue.js引入Html界面,然后就开始刷vue的官方文档了。在刷过文档之后,我就想着,真实的项目是怎么样子的呢,然后就开始了vue-cli... -
Vue项目打包成移动端APP
2019-09-25 20:50:14Vue项目打包成移动端APP 需要准备的工具:Hbuilder 目录 Vue项目打包成移动端APP 首先打包vue到dist目录 然后再Hbuilder中打开dist目录 然后将dist包含的 web项目 转换为 移动 APP项目 前几步配置完成后,就... -
vue项目可视化管理之(vue ui)
2019-06-24 18:16:22可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。 还可以查看运行依赖和开发依赖的以及在线安装和更新依赖,非常方便 任务按钮下,你可以运行项目、打包项目,检查等... -
VUE项目学习(三):win10版nginx部署vue项目
2021-01-08 11:05:12win10 nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/112272058 1、打包vue项目 (1)在前端编译工具的终端界面中,使用命令:npm run build,对vue项目... -
Linux服务器部署vue项目
2018-09-09 20:32:52新建一个vue项目。 //详细的怎么创建。我这里就不说了。 vue init webpack vuetest 得到的项目目录 执行, npm run build // 进行打包操作 当最后看到这样代表打包成功 此时你可连接服务器。我这里用..... -
使用Vue-CLI创建Vue项目
2020-04-21 21:45:33利用Vue-CLI初始化构建Vue项目时,我们将会获得一个初始的文件夹结构,如下所示: 2 . 安装Vue-CLI npm install -g @vue/cli 或 yarn global add @vue/cli 例: 3 . 使用vue --version或vue -V指令,查... -
Vue项目中实现用户登录及token验证
2018-10-08 22:42:10在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3、前端... -
VUE项目学习系列博文
2021-01-12 16:06:14VUE项目学习系列博文 VUE项目学习 (1)VUE项目学习(一):搭建VUE前端项目 (2)VUE项目学习(二):学习项目文件结构 (3)VUE项目学习(三):win10版nginx部署vue项目 (4)VUE项目学习(四):编写个人页面和... -
nginx同时部署多个vue项目
2019-03-13 14:35:21nginx同时部署多个vue项目 项目1路径: 项目2路径: nginx.conf代码如下: #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info... -
vue项目环境部署,在指定目录下搭建vue项目
2019-03-05 14:42:45vue项目环境部署准备工作指定目录创建新项目安装依赖项目运行 准备工作 1、必须要安装nodejs 下载网址http://nodejs.cn/download/ 注意下载与系统相匹配的nodejs 安装完后cmd内可使用node -v检查node的版本... -
vue2.0学习——使用webstorm创建一个vue项目
2018-07-09 08:19:12背景:小白自学vue,翻阅了好多大神的博客,看了网上很多的视频,过程很... 我使用的是webstorm来创建vue项目,前辈说用这个软件学习还是不错的,事实证明,确实不错。 一、webstorm的安装: 1、什么是webstorm... -
vue项目运行报错:serve: `vue-cli-service serve`
2020-01-29 13:01:56vue项目运行报错:serve: vue-cli-service serve 首先,你先去检查下你配置的 host:地址是多少 ,比如我的是localhost,如果用的是局域网IP 那就要更改成你目前的局域网IP 或 改成localhost module.exports = { dev... -
关于VUE项目中报Error: Avoided redundant navigation to current location: 的错
2020-06-05 10:41:43虽然对项目无影响,但是看到有红的还是不舒服。 于是查了一下发现可以这样解决 在你引入VueRouter的时候再加上一句话: const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push... -
Vue项目实战:Vue项目到底是如何运行的?执行访问流程?
2018-06-21 10:41:33转载自Vue项目流程 -
VUE项目学习(一):搭建VUE前端项目
2020-12-29 17:12:19新手搭建VUE前端项目 1、安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ... 检查cnpm是否安装成功 2、搭建vue项目 (1)全局安装VUE脚手架v -
vue项目部署到服务器上
2019-09-02 11:38:28在前面的文章里面,自己做了...Vue项目从搭建环境到打包上线 https://www.jianshu.com/p/7791bf749f66 1:使用npm run build进行打包 打包完成显示 这个时候可以看到项目里面多了一个dist文件夹 2:打开dist/下的... -
Vue.js —— Vue Cli3构建Vue+ant design vue项目
2019-09-06 09:43:01Vue Cli3构建Vue+ant design vue项目编辑器需添加插件:浏览器需添加插件: 编辑器需添加插件: 前提:我使用的是vs code编辑器。 1、beautify——代码格式化。 2、vetur——支持.vue文件的语法高亮显示、自动完成等... -
vue项目笔记(30)-vue项目接口的联调与真机测试
2018-08-20 09:54:40vue项目接口的联调与真机测试 vue项目接口的联调 当前端的代码编写完毕,后端的接口也已经也编写完毕的时候,我们此时便需要进行接口联调,将模拟的数据替换为真实的后端接口。 vue项目中进行接口联调的步骤: 1... -
vue/cli快速搭建vue项目
2020-08-02 14:43:54首先我们来看如何使用脚手架创建一个vue项目, 脚手架别人写好的一坨代码,它像其他包一样,放在了npm上 npm是一个js的包管理工具,它内置在node环境里 首先,安装node 学到这里,你应该已经安好了,如果没有,这里... -
多个Vue项目如何部署到服务器
2020-10-21 20:28:46最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢? 二、部署 (1)首先在本地测试项目可以启动并且能正常运行。 (2)在项目中输入npm run build 此时会生成一... -
eclipse 开发 vue项目
2019-12-05 09:01:04最近需求需要,要在eclipse上进行vue开发,按照网上教程...检查无误后创建vue-demo-helloworldvue项目,在控制台执行vue init webpack vue-demo-helloworld,如图路径 访问地址:http://localhost:8080/#/ 如... -
Vue 使用Vue-CLI4 创建Vue项目
2019-11-07 10:23:31vue create 项目名称 选择手动配置(如果喜欢使用eslint可以选择默认) 键盘上下键即可切换,刚开始其实有两个选项,我之前曾经自定义过,所以有三个。 取消eslint(Linter) 下一步默认 是否保存模板(预设... -
使用vue创建uni-app项目、electron-vue项目
2019-05-03 16:45:03npm环境,安装vue-cli, 创建uni-app项目 vue create -p dcloudio/uni-preset-vue project_name 创建uniapp项目 ...创建electron-vue项目 vue init simulatedgreg/electron-vue project_na... -
vue 项目报错提示 Uncaught ReferenceError: Vue is not defined
2019-04-11 16:53:04报错提示:Uncaught ...把vue 项目中vue 文件引入的<script> 标签放到文件头部。 错误放置: 正确放置:把<script>移到头部 <head>标签中,使vue文件在项目运行后第一个加载 ... -
vue项目打包App
2017-12-23 13:58:57本地的vue项目打包成App。这里以Hbuilder为例。首选命令行进入项目的目录执行 npm run build 打包成功之后再项目下回生成一个dlist 文件夹。在Hbuilder中导入dlist文件夹。选中项目右键选择转换成移动App。 ...
-
scikit_learn-0.24.1-cp38-cp38-win_amd64.whl
-
rtxserver2009formal.zip
-
WSL2与VMware不兼容问题解决
-
云计算基础-Linux系统管理员
-
gradle-5.x.all.zip,懂的下载,保证你满意而归
-
【Android 系统】---Android系统详解 史上最详细 持续更新中
-
推荐程序员面试秘籍!耗时两个礼拜,8000字安卓面试长文,全套教学资料
-
js入门
-
【2021】Python3+Selenium3自动化测试(不含框架)
-
three.js入门速成
-
SQL数据库实验报告.pdf
-
web前端开发规范
-
RabbitMQ消息中间件实战(附讲义和源码)
-
【数据分析-随到随学】Python语法强化与数据处理
-
JAVASE.pdf
-
DTC-Airborne-Mesh-White-Paper.pdf
-
ppt各个领域模板大全.txt
-
前端架构师-速成
-
【数据分析-随到随学】Tableau数据分 析+PowerBI
-
全面掌控你的苹果Mac:iStat Menus