Vue cli构建及项目打包以及出现的问题解决


Posted in Javascript onAugust 27, 2018

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文件,好记性不如烂笔头:

项目目录部分:

Vue cli构建及项目打包以及出现的问题解决

比如要在App.vue中引入其他模块;

importcomponentA @/components/componentA //下图ruter-view标签仅仅表示显示,有组件不一定能够显示,必须要router-view一下;当前app.vue为默认根模块;

Vue cli构建及项目打包以及出现的问题解决

在Banana中应该这样: <一个标准的vue文件应该包括 下面三种大类的标签> 其中name属性必不可少;

Vue cli构建及项目打包以及出现的问题解决

注意了:这里面的不需要声明一个 变量=new Vue({ }) 之类的,这个文件本身就代表一个实例了,在export default 内中 其实就是一个 vue字面量对象的描述,可以这样认为;

关于路由传参数:(以下是main.js), 这里有一个坑;

Vue cli构建及项目打包以及出现的问题解决

用 webpack vue-cli 自动构建项目后, 注意路由模块,是放在main.js下,还是放在router文件下的index.js

废话少说: 这里关键是正确引入路由,正确配置路由(构建路由对象),每一个路由给他一个name属性方便使用路由,在者,路由传参中, path 最后的冒号可以写可以不写,前提是(以下是组件 componentA):

<router-link>中 params:{}这个对象中写了, 写与不写的区别就是 不写 在url地址栏中显示或者不显示; 但是在子组件中用 $router.params都可以找到;

Vue cli构建及项目打包以及出现的问题解决

以下为Apple子组件: 也可取出来 {{$route.params.color}}

Vue cli构建及项目打包以及出现的问题解决

如何在项目中使用第三个库呢?

比如使用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这个属性;

Vue cli构建及项目打包以及出现的问题解决

下面具体讲一下History模式:

 1、 为什么要开启?

首先,你的网站首页,域名后跟着一个大大的#,太难看了!跟开发他美丽帅气的程序汪完全不搭。

其次,官网上人家尤大大说了:“ history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。”

怎么理解呢?举个常见的场景说,就是如果你开发的是手机端应用,你从主页点击进去新闻列表,此时你看完新闻,想要回到首页,按以前的想法,那就是一个href重新打开首页呀。然后首页重新加载js,向服务器请求新闻列表,等等这些初始化的工作,都要重新做一次。对于用户而言,这个过程慢、费流量,用户体验其实是不好的。

而html的history模式,就能够让你从新闻详情页跳转到首页,不需要再次进行数据的初始化了。当然,这可能需要配合vuex来进行了。

 2、 在哪儿开启?

在你的实例化Router的时候配置开启即可:

const routers = new VueRouter({
 routes: router,
 mode: 'history'

})

上述就是目前遇到的一些基本问题;希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
实例浅析js的this
Dec 11 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 #Javascript
vue实例中data使用return包裹的方法
Aug 27 #Javascript
vue项目打包部署到服务器的方法示例
Aug 27 #Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 #Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 #Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 #Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 #Javascript
You might like
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
点球小游戏python脚本
2018/05/22 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
关于护士节的演讲稿
2014/05/26 职场文书
英语教师求职信
2014/06/16 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
公司离职证明范本
2014/10/17 职场文书
小学教师个人总结
2015/02/05 职场文书
预备党员自我评价范文
2015/03/04 职场文书
企业战略合作意向书
2015/05/08 职场文书
同学会感言
2015/07/30 职场文书