≡
  • 网络编程
  • 数据库
  • CMS技巧
  • 软件编程
  • PHP笔记
  • JavaScript
  • MySQL
位置:首页 > 网络编程 > vue.js

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

人气:429 时间:2019-04-11

这篇文章主要为大家详细介绍了Vue cli构建及项目打包以及出现的问题解决,具有一定的参考价值,可以用来参考一下。

感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!

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'

})

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

本文来自:http://www.q1010.com/184/5784-0.html

注:关于Vue cli构建及项目打包以及出现的问题解决的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。

关键词:vue.js

您可能感兴趣的文章

  • vue项目打包部署到服务器的方法示例
  • 解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
  • 解决vue中修改export default中脚本报一大堆错的问题
  • Vue中mintui的field实现blur和focus事件的方法
  • vue 监听键盘回车事件分析 @keyup.enter || @keyup.enter.native
  • vue组件开发之用户无限添加自定义填写表单的方法
  • Vue实现美团app的影院推荐选座功能【推荐】
  • Vue CLI3 如何支持less的方法示例
  • 解决vue的变量在settimeout内部效果失效的问题
  • 对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
上一篇:vue中各选项及钩子函数执行顺序分析
下一篇:vue 监听键盘回车事件分析 @keyup.enter || @keyup.enter.native
热门文章
  • Vue 报错TypeError: this.$set is not a function 的解决方法
  • vue实现动态添加数据滚动条自动滚动到底部的示例代码
  • vue项目设置scrollTop不起作用(总结)
  • vue项目中使用vue-i18n报错的解决方法
  • iview实现select tree树形下拉框的示例代码
  • 分析关于element级联选择器数据回显问题
  • vue项目打包后打开页面空白解决办法
  • 解决element ui select下拉框不回显数据问题的解决
  • element-ui table span-method(行合并)的实现代码
  • element-ui 设置菜单栏展开的方法
  • 最新文章
    • 理解vue ssr原理并自己搭建简单的ssr框架
    • vue favicon设置以及动态修改favicon的方法
    • vue-router启用history模式下的开发及非根目录部署方法
    • 从零开始在NPM上发布一个Vue组件的方法步骤
    • Element input树型下拉框的实现代码
    • Vue 报错TypeError: this.$set is not a function 的解决方法
    • Vue.js组件高级特性实例分析
    • 浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
    • 分析Vue.js自定义tipOnce指令用法实例
    • 浅谈vuex actions和mutation的异曲同工

四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。