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 相关文章推荐
JQuery表格内容过滤的实现方法
Jul 05 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
JS图片预加载插件详解
Jun 21 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
react MPA 多页配置详解
Oct 18 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
vue 如何使用递归组件
Oct 23 Javascript
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实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
smarty简单应用实例
2015/11/03 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python绘制雪景图
2019/12/16 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
音乐专业自荐信
2014/02/07 职场文书
《春笋》教学反思
2014/04/15 职场文书
节约用水的口号
2014/06/20 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
北京故宫导游词
2015/01/31 职场文书
2015年保管员工作总结
2015/04/30 职场文书
工作证明格式范文
2015/06/15 职场文书
生活委员竞选稿
2015/11/21 职场文书
《落花生》教学反思
2016/02/16 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
创业计划书之干洗店
2019/09/10 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
一文搞懂MySQL索引页结构
2022/02/28 MySQL