vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue.js开发环境搭建 VUE.JS简介 何为Vue.js Vue.js(读音 /vjuː/, 类似于 view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue…

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表. 官网:https://echarts.baidu.com/ 兼容性很好的,数据可视化图标.本章只介绍在vue里面如何配置使用: 你可以使用如下命令通过 npm 安装 ECharts vue2----…

如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经不再维护,以及 --fix 之后 .vue 文件只剩下 <style> 部分等.我在踩完坑跑通出满意的效果后,维护一份新的指引,以备后续项目使用,顺便分享一下. 为什么选择用 stylelint ? 这个问题有两层含义,一是为什么要使用这个样式代码风格检查工具,二是与其他工具相比,为什么选择 st…

webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部,cp them us.所以呢,就利用两天时间,参考了一些他人的文章,查阅了一些官方的配置,就在此先稍微记录一下. 这份配置解析是基于最新版本的vue webpack template.不过,我非常建议,先别看我的文章,自己一句一句的通读一遍.然后再来瞅瞅,毕竟,碰撞的思维才能创造新的发现. vue…

全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silent = true 取消 Vue 所有的日志与警告. optionMergeStrategies 类型:{ [key: string]: Function } 默认值:{} 用法: Vue.config.optionMergeStrategies._my_option = function (pare…

vue+element-ui路由配置相关 转自:http://www.cnblogs.com/MonaSong/p/6703804.html vue-router2中说明了,子路由前面可以不加'/',但是在使用element-ui的时候 用了el-menu组件,这个组件的一个属性可以开启router 然后直接使用index属性赋值为路由,这个时候如果router中的路径中没有加'/'会发生跳转错误 图一:注意红色箭头指的地方 图二:使用el-menu组件的index属性直接赋值路由 图三:ele…

Vue多环境配置 大家都知道,使用vue-cli脚手架生成的Vue项目只有开发环境和生产环境,然而在实际开发中,用到的不止这些环境,还包括测试环境,准生产环境等等.所以需要自己添加没有的环境. 以测试环境为例,配置如下: 第一步: package.json文件下scripts节点对象中新增一条属性. "test": "node build/build-test.js" 第二步: 在build文件夹下复制一份build.js,重命名为build-test.js. 修改…

今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如设置代理,打包配置等问题呢? vue cli3.0项目中需要配置其他参数时,需要新建文件'vue.config.js',(这文件名是固定这么写的),与package.json在同一级目录下. module.exports = { // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根…

温馨提示:本文只适用于vue-cli 3.0 及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不同环境中切换.那么我们如何配置不同的环境变量呢? 为了更加方便消化本文章,建议先看下官方文档: 环境变量和模式 看完官方的文档如果还没有明白,可以参考本文. 在vue-cli 构建的项目中,默认有3种模式,如下图: 我个人的理解就是: 你执行npm run serve时,对应的环境就是开发环境: 你执行npm run buil…

[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章使用vue-cli3.0构建的项目是基于webpack的模板文件,构建后的项目属于单页面(SPA)应用.因此,该文档后续操作与说明不适用于构建一个多页面应用. 相比于之前有如下优点: 功能丰富:对babel.Typescript.ESLint...提供开箱即用的支持 易于扩展:它的插件系统可以让社区…

vue eslint 规范配置 为了代码格式统一,避免一些低级或者不合理的错误,现强行使用eslint的 standard规范 项目配置 目前都是使用 vue 提供的脚手架进行开发的,虽然 vue-cli 3.0,但是公司因为配置了OAuth的缘故,暂时还是只能使用vue-cli 2.0, 因而当前配置会结合两个版本进行阐述 目的 可以通过编辑器(vscode)进行提示同时可以修复,如此便是最好的 vue-cli 2.0 新建项目时选择 standard格式 测试eslint (随便选个地方,打…

这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧 这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架2.使用v…

官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建 我们看一下源码部分: parallel 接受 boolean 值: parallel: joi.boolean() 默认设置如下: parallel: hasMultipleCores() 依赖了函数 hasMultipleCores in some ca…

在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 @vue/cli-service/lib/options.js 中 indexPath: joi.string() 默认值: indexPath: 'index.html' 使用案例: 我们在 vue.config.js 中配置: indexPath: '1/2/3/b.html' 最终在编译之后…

VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 Allow CORS: Access-Control-Allow-Origin 解决方式2:服务端配置跨域访问 也可以在服务端配置解决这个问题,这个要找后台协商. 很多开源的第三方库都做了处理,你在哪里调用都不会出现跨域问题. 解决方式3:前端项目配置本地代理 经过测试,这种方式通用性很强,不需要…

目前比较流行的打包大都是在vue.config.js配置代理,然后在根目录新建.env.xxx文件配置正式环境,测试环境,开发环境等用于打包时配置不同的访问地址,作为一名随波逐流的前端开发,我也是这么干的,但是总有人很欠,开发中疯狂改ip,然后导致我们要跟着打包,ip的改动导致我们配置的环境根本没有用武之地,于是乎我就想有没有一次打包项目,ip可以让他们开发自己配置,避免重复打包呢? 说做就做,因为原来没有弄过这方面的问题,又这方面的想法,但是没有这方面的开发思路,于是乎百度了一下发现还真有不少…

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入…

1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求,此记录为统一配置出入口. 2. 实例 2.1 页面配置 使用vue脚手架搭建后将默认index.html,app.vue,main.js三个页面删除,然后在src目录下新增pages文件夹,增加所有的多页面文件. 2.1.1 首页一 src>pages>index>index.html,index.vue,index.js 2.1.2 首页二 src>page…

module.exports = {   // 基本路径   baseUrl: process.env.NODE_ENV === 'production'     ? '/'     : '/',   // 输出文件目录   outputDir: 'dist', // 默认dist   // 用于嵌套生成的静态资产(js,css,img,fonts)目录   // assetsDir: '',   // 指定生成的 index.html 的输出路径 (相对于 outputDir).也可以是一个绝…

1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求. 2. 实例 2.1 页面配置 2.1.1 默认首页 使用vue脚手架搭建后的首页信息:index.html,app.vue,main.js 2.1.2 测试首页 单独创建的首页信息:home.html ,home.vue,home.js 2.1.3 页面展示 2.2 webpack配置 2.2.1 webpack基础配置:webpack.base.conf.js 增加入口…

最近在搞Jest单元测试,如何在vue中安装和使用jest我就不说了,前一篇文章简单的说了一下在使用jest时遇到的一些问题,但是我觉得并没有真正的解决的很好.后面会在学习过程中更新前面的那篇文章,加入后续遇到的问题以及解决问题的方法,持续的做一个记录. 好了,废话不多说,咱们开始今天的内容吧.因为之前使用jest时候的项目是移植过来的项目,因为复杂的环境以及外部文件引入的等等等等的问题.采用的方式就是新建一个空的vue-cli生成的用jest来做单元测试的项目,这就导致了测试环境的配置是极为脆…

1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动端flexible.js结合Muse-ui使用的小坑 1/px to rem 插件(vs code) 使用的时候选中 Alt + Z 2/安装步骤见链接: http://blog.csdn.net/zhanglong_web/article/details/78649717 http://blog.…

新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js   配置目录入口文件 import api from './website' // 当前平台 export const H…

一.准备工作 1安装vue-cli  npm install vue-cli -g 2检查是否安装成功 vue -V(大写V) 3初始化一个新的项目 vue init  webpack vue-demo 进入项目目录 npm install   npm run dev 二.配置路由 1我们可以看到生成的router文件夹下面有个index.js 首先我们先在components下新建几个组件,如HelloWorld.vue \ Home.vue    在index.js中引入 ,路由配置如下 i…

eslint配置方式 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 配置文件:使用一个js文件,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一个文件名为.eslintrc.*的文件或者在package.json文件里的eslintConfig项里, 这两种方式ESLint都会自动寻找然后读取,或者你也可以在命令行里指定一个配置文件. 有几种东西是可以配置的 环境:你的脚本会在哪种环境下运行.每个环境带来了一组特定的预定义的全局变量. 全局变量…

准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题.  又或者后面其他同事接手你的模块,或者改你的bug时避免人家看的眼痛以及心里千百句mamaipi...问候. 并且一个好的开发思路也能大大提高开发效率,以及检验自己. 进入正题: 在本地用 vue-cli 新建一个项目,这个步骤vue的官网上有,我就不再说了. 这里展示一下我的项目架构目录  这次主要讲红字具体实现部分 ├── build // 项…

直接引入 <script src="https://unpkg.com/vue"></script> 用npm安装   $ npm install vue Vue.js 提供一个官方命令行工具,vue-cli可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my…

我使用的是 Vue + ElementUI 进行构建的项目,在开发过程中,使用的是前后端分离的模式,所以经常会出现多环境配置信息,尤其是 Api 接口地址的配置,如果在代码中使用判断的方式,感觉不友好. 如果你使用的是 webpack,下面我来介绍一种方法可能会帮助到你: 使用 DefinePlugin 来根据不同的环境设置不同的配置信息,具体参考 在 build 目录下面找到 webpack.dev.conf.js webpack.prod.conf.js # webpack.dev.conf…

什么是axios?官方解释:axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 具有以下特点: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 但是对于目前的我而言,它就是一种用来发送网络请求的方法. 使用axios发送请求很简单,代码也极其条理化. 安装方法: (1).使用np…

// https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true, jquery: true }, extends: [ // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prev…