新的 vue-cli 默认禁止了 commonjs 语法可以添加 babel 插件解决 yarn add @babel/plugin-transform-modules-commonjs -D 或 npm install --save-dev @babel/plugin-transform-modules-commonjs 编辑 babel.config.js module.exports = { presets: ['@vue/app'], plugins: [ [ '@babel/plugi…

目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 online github Vue cli 3.0 使用 svg-symbol(svg 雪碧图),整个 https://www.iconfont.cn 的图标库为你所用,加快开发速度. Vue 脚手架升级 3.0,项目也随…

前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目,这样会使我们的前后端会同时的进行,提高我们的开发效率. 因为最近自己在自学 Vue 也在自己撸一个项目,肯定会遇到使用数据的情况,所以就想着如何在前端做一些 mock 数据的处理,因为自己的项目使用的是 vue/cli 3.0 与 vue/cl…

[问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Django那边的静态资源配置只认static,其他目录好像没用 [解决方法] 现在Django项目setting.py里面检查静态文件的配置 然后再去前端目录找到vue cli 3.0的配置文件,这里有个坑就是,vue cli 3.0的已经没有config目录,配置文件需要手动添加,如果没有vue.c…

在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功.  然后就可以构建项目了,依次输入命令: vue init webpack “名称” cd 名称(进入到创建的项目中) npm install (安装项目的依赖) npm run dev (启动项目) 然…

之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同.这里对@vue/cli 4.0+express实现前后端分离的经验进行总结. 一.准备: @vue/cli 4.0搭建的vue前端项目 Express 应用生成器 npm install express-generator -g 二.这里首先对express搭建后端项目进行介绍 express 项目名 cd 项目名…

译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 尽管我已经在工作上用了Vue.js一段时间,但我从不需要在npm上发布组件.但最近发现在不同的项目重写组件是件非…

一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install -g @vue/cli 2. 检查版本 vue --version 二.创建项目 (用的cmd工具) 1. 利用 cd 指令进入到指定目录,即你的项目想放在哪个地方就进入到哪个目录里面 2. 创建项目,通过指令: vue create projectname    (说明: projectname…

1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模版本身变得极其复杂和难以维护,而提供多个模版一方面会让初学者无所适从,另一方面模版之间也难以共享功能或是互相迁移.CLI 3 对此的解决方案是通过插件的形式去支持多个不同的功能,一个插件对应一个功能(比如单元测试),这样即避免了多个模版,也使得 CLI 自身的可维护性得到提升.同时,支持第三方插件,…

vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cli 4 的项目搭建吧,回顾一下. 1. 创建项目 对应的命令: npm create '项目名 ' 2. 手动选择配置选项 这里我们一般选择手动配置 3.选择需要的依赖 这里的话按住空格就是选择,全选的话就是按住a ? Check the features needed for your proje…

.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. Manually select features自己去选择需要的功能,提供更多的特性选择.比如如果想要支持 TypeScript ,就应该选择这一项. 可以使用上下方向键来切换选项.如果只需要 babel 和 eslint 支持,那么选择第一项,就完事了,静静等待 vue 初始化项目. vue-c…

1. Vue CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头,非常容易使用,如@vue/cli-plugin-babel. 安装vue-cli npm install -g @vue/cli # OR yarn global add @vue/cli 你还可以用这个命令来检查其版本是否正确: vue --version 如…

Configuration Reference This project is sponsored by  #Global CLI Config Some global configurations for @vue/cli, such as your preferred package manager and your locally saved presets, are stored in a JSON file named .vuerc in your home directory. Yo…

本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set registry https://registry.npm.taobao.orgcnpm config set registry https://registry.npm.taobao.orgyarn config set registry https://registry.npm.taobao.org配…

前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D:\workplace 输入全局安装vuecli的命令:cnpm install -g @vue/cli 输入检查vue版本的命令:vue --version 如果版本为3.0+,则继续. 输入创建项目的命令:vue create vue-sell-cube 会看到 ? Your connectio…

安装vue-cli3   npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 配置 flexible 安装 amfe-flexible  …

安装 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 检查node版本: $ node -v v8.9.3 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x), 通过 npm uninstall vue-cli -g  卸载它. 安装vue-cli3   npm instal…

在项目根目录创建vue.config.js文件 module.exports = { devServer: { port: 3000, // 端口 }, // lintOnSave: false // 取消 eslint 验证 } 运行项目即可 返回目录…

今天就来讲一下git有关的小技巧,.bashrc文件是用户配置文环境变量的文件,每次git bash会首先运行里面的内容 1.自动运行 每次进入git bash都会先读取.bashrc里面的内容,因此可以先将要运行的代码,放在.bashrc文件里面的. 设置方法: 1.先创建一个.bashrc文件:touch ~/.bashrc 2.启用编辑器更改内容  start ~/.bashrc    或者使用命令行编写  echo "1111" >>~/.bashrc 3.重启即可…

mockjs 官网:http://mockjs.com/ 之前没有使用过 mockjs 的同学,请参考官网文档,数据生成规则和方法的调用都有详细说明. 一.通过npm安装依赖包 1. 进入到项目目录,执行指令: npm install mockjs -D 由于mockjs是用来模拟数据的,只有是开发环境会用到,所以生产环境是不需要mockjs的,所以安装的时候参数用 -D 2. 安装成功后,package.json文件中可以看到相关依赖 二.在 src 文件夹下创建名为 mock.js 文件,并…

ElementUI 官网: http://element-cn.eleme.io/#/zh-CN/component/installation 一.通过npm安装依赖包 1. 进入到项目目录,执行指令 : npm i element-ui -S 2. 安装成功后 package.json 中可以看到相关依赖,如下图: 二.在 main.js 文件中引入 elementui 说明: 样式文件得单独引用进来, reset.css 是样式重置文件,根据自己项目情况引入 至此,一个基于 Vue 和 El…

在安装cube-ui框架时 安装成功后在[E:\WWW\xxx\node_modules\vue-cli-plugin-cube-ui\generator\rem\index.js]修改remUnit值为100 在[E:\WWW\xxx\node_modules\amfe-flexible\index.js]修改函数 setRemUnit 代码如下 Math.min(docEl.ClientWidth,750)/375*100 …

原文地址 在项目开发中我们需要配置环境变量,开发环境,生产环境和测试环境.在cli 2.0的版本中我们是通过在config文件夹进行配置的,vue/cli 3.0相对简单,只需要在项目根目录创建.env文件即可.以下是环境对应文件名和命令 模式 对应npm命令 对应文件名称 development server .env.development production build .env.production test test .env.test 注意: process.env.NODE_EN…

介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service) 一个开发环境依赖,局部安装在每个 @vue/cli 创建的项目中. 可升级 ? 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行配置: 可以通过插件进行扩展.-- cli 插件是用来给 we…

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 用法很简单,每个 CLI 都大同小异: npm install -g @vue/cli vue create vue-cli-test 目前 Vue CLI 同时支持 Vue 2 和 Vue 3 项目的创建(默认配置). 上面是 Vue CLI 提供的默认配置,可以快速地创建一个项目.除此之外,也…

vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去创建这个文件的哈 那么它会被 @vue/cli-service 自动加载. module.exports={ productionSourceMap: false, //生产环境地图资源,默认为true,此时js不会生成对应的.map文件 publicPath: process.env.NODE_E…

通过Node.js的官方API可以看到Node.js本身提供了很多核心模块 http://nodejs.org/api/ ,这些核心模块被编译成二进制文件,可以require('模块名')去获取:核心模块具有最高的加载优先级(有模块与核心模块同名时会体现),如: var fs=require('fs'); var http=require('http') 文件模块访问方式通过require('/文件名.后缀') require('./文件名.后缀') requrie('../文件名.后缀') 去…

  因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建vue项目模板.但是最近新建项目的时候发现,即使是在本机全局安装了vue最新版本2.5.17,可是用vue-cli脚手架创建vue项目木板的时候发现,vue的版本还是2.5.2版本.查过官方文档之后了解到,vue-cli有最新版本,需要重新安装,而且新建项目的方式也有所不同.这篇文章将针对vue以及v…

文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm推荐的新的包名规则,使用作用域.详情可查看此文章. 命令变化 vue -h 我们看到 create [options] <app-name> 创建一个由vue-cli-service支持的新项目 invoke <plugin> 在已创建的项目中添加插件 serve [options]…

首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装,(由于我用的是yarn 后续都使用yarn进行操作) 安装完成后有键入 vue --version 输出 @ vue/cli 4.2.2 说明安装成功. 开始创建项目 到想要创建项目的地方,键入 vue create demo 回车 选择 然后,空格键选择 之后依据自己的需求选择即可,选择结束后自…