Vue cli构建及项目打包以及出现的问题解决
作者:七分sunshine! 发布时间:2023-07-02 16:46:46
1. 首先安装node,推荐偶数版本;好了之后检查一下: node -v;出现版本好即为安装成功;win10家庭版本的msi版本的时候出现无法打开,更别说安装,可以自行百度;
2.nmp install vue-cli -g; ----->>vue -V;出现版本号就是安装成功了;
3.cd 到指定目录; vue init webpack 项目名称; 一些提示信息一一不说了;安装成功之后会有提示:一般按照他的提示步骤就可以了,cd 项目文件夹,
npm install(这个是安装 packjson.json的依赖,非常重要) , 最后运行 npm run dev; 会自动在8080端口打开网页,那么环境这一步是成功了;
4.介绍一下几个非常中重要的文件(夹):
config目录下的index.js是配置,node_modules下全部都是所要依赖模块的文件夹;src是本地资源;比如我们要编写的文件;其中main.js是入口文件;
5.下面介绍模块化引入vue文件,好记性不如烂笔头:
项目目录部分:
比如要在App.vue中引入其他模块;
importcomponentA @/components/componentA //下图ruter-view标签仅仅表示显示,有组件不一定能够显示,必须要router-view一下;当前app.vue为默认根模块;
在Banana中应该这样: <一个标准的vue文件应该包括 下面三种大类的标签> 其中name属性必不可少;
注意了:这里面的不需要声明一个 变量=new Vue({ }) 之类的,这个文件本身就代表一个实例了,在export default 内中 其实就是一个 vue字面量对象的描述,可以这样认为;
关于路由传参数:(以下是main.js), 这里有一个坑;
用 webpack vue-cli 自动构建项目后, 注意路由模块,是放在main.js下,还是放在router文件下的index.js
废话少说: 这里关键是正确引入路由,正确配置路由(构建路由对象),每一个路由给他一个name属性方便使用路由,在者,路由传参中, path 最后的冒号可以写可以不写,前提是(以下是组件 componentA):
<router-link>中 params:{}这个对象中写了, 写与不写的区别就是 不写 在url地址栏中显示或者不显示; 但是在子组件中用 $router.params都可以找到;
以下为Apple子组件: 也可取出来 {{$route.params.color}}
如何在项目中使用第三个库呢?
比如使用jquery,首先也是 npm install jquery@3.2.1 ;
在main.js(入口文件)import jquery from 'jquery'; 然后在一个组件中使用的时候 import jquery from "jquery"; 这样jquery就是全局变量了;
也可这样:比如使用百度的echarts库: 在main.js引入:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在使用的时候就直接是 this.$echarts了,this指的是vue实例;
项目完成后用 npm run build可以打包项目; 打包配置在config文件夹下的 index.js 的 build对象下;如需在本里预览,assetsPublicPath: './',改成相对路径; 如果你的css文件中引用了background相对路径,那么在打包后预览后是会出现资源找不到的情况的;可以在build文件夹的utils.js下:新增这个publicPath这个属性;
下面具体讲一下History模式:
1、 为什么要开启?
首先,你的网站首页,域名后跟着一个大大的#,太难看了!跟开发他美丽帅气的程序汪完全不搭。
其次,官网上人家尤大大说了:“ history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。”
怎么理解呢?举个常见的场景说,就是如果你开发的是手机端应用,你从主页点击进去新闻列表,此时你看完新闻,想要回到首页,按以前的想法,那就是一个href重新打开首页呀。然后首页重新加载js,向服务器请求新闻列表,等等这些初始化的工作,都要重新做一次。对于用户而言,这个过程慢、费流量,用户体验其实是不好的。
而html的history模式,就能够让你从新闻详情页跳转到首页,不需要再次进行数据的初始化了。当然,这可能需要配合vuex来进行了。
2、 在哪儿开启?
在你的实例化Router的时候配置开启即可:
const routers = new VueRouter({
routes: router,
mode: 'history'
})
上述就是目前遇到的一些基本问题;希望对大家的学习有所帮助,也希望大家多多支持。
来源:https://www.cnblogs.com/liuliu-hai/p/8448700.html
猜你喜欢
- 一些命令行工具的使用能够大大简化代码脚本的维护成本,提升复用性,今天主要是借助于python提供的几种主流的参数解析工具来实现简单的功能,主
- 这篇文章主要介绍了python如果快速判断数字奇数偶数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 目录1. 需求是怎么来的2. 以不变应万变,是变也3. 最大限度地少改动4.对带参数的函数使用装饰器5. 给装饰器参数6.带类参数的装饰器7
- 假设我有一个DataFrame(df)如下:name age idmike 10 1tony 14 2lee 20 3现在我想把id 放到最
- 在进行小数计算的时候使用float,经常会出现小数位不精确的情况。在python编程中,推荐使用decimal来完成小数位的精度计算。dec
- 今天交流会上,分享前端的开发经验,有一条虽然很快带过,但是我倒是印象蛮深刻的,就写点小结来分享一下吧。不知道是标准害了大家还是大家害了标准,
- 一、简介Python是一门功能强大的高级脚本语言,它的强大不仅表现在其自身的功能上,而且还表现在其良好的可扩展性上,正因如此,Python已
- pygame对键盘的连续监听,供大家参考,具体内容如下大家请看下面这一段代码:for event in pygame.event.get()
- 第一列按照goodsid局部分组,然后在分组后的记录中按照audittime升序排序得到序号,从而显示某商品得第几次变迁。 第二列是取该商品
- 先来了解一下收/发邮件有哪些协议:SMTP协议 SMTP(Simple Mail Transfer Protocol),即简单邮件传输协议。
- 01前言数据是数据科学中任何分析的关键,大多数分析中最常用的数据集类型是存储在逗号分隔值(csv)表中的干净数据。然而,由于可移植文档格式(
- 概述从前面的对Python基础知识方法介绍中,我们几乎是围绕Python内置方法进行探索实践,比如字符串、列表、字典等数据结构的内置方法,和
- 写作背景最近本菜鸡有几个网站想要爬,每个爬虫的代码不一样,但 有某种联系,可以抽出一部分通用的代码制成模板,减少代码工作量,于是就有了这篇文
- PyGame 是专为游戏开发而设计的 Python 库。PyGame 建立在SDL库之上,因此它提供了用 Python 开发游戏的全部功能。
- 前言总所周知,go 里面只有两种 channel,一种是 unbuffered channel, 其声明方式为ch := make(chan
- 该代码用的是paramiko模块,python版本是python2.7下面上源码# -*- coding: utf-8 -*-import
- position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览
- 如:获得 2015-03-01 日的前7天的日期 : select date_sub('2015-03-01',interv
- AICodeHelper是一款AI编程助手,旨在帮助程序员提高他们的编码技能。简单的像尝试的代码直接问就行,但是一些复杂的,就得需要写技巧;
- 数据集介绍《悲惨世界》中的人物关系图,图中共77个节点、254条边。数据集截图:打开README文件:Les Misérables netw