Vue CLI | 易学教程

vue-cli项目下引入vant组件

阅读更多关于 vue-cli项目下引入vant组件

前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。 vant地址： https://youzan.github.io/vant/#/zh-CN/intro 本章目标在vue-cli的项目中使用vant的相关组件项目构建如果您还没有搭建vue-cli项目，那么请参考 https://www.cnblogs.com/jjgw/p/11334797.html 这篇博客,搭建好的vue-cli项目结构如下： 1.接下来我们在控制台输入安装vant的命令　　 npm i vant -S ：这是简写形式。　　npm install vant --save :这是完整写法。 2.安装完成之后的结果 3.如果您不确定是否安装成功，那么我们可以去node_modules中查看 4.接下来我们还需要安装一个插件，方便我们之后优雅的使用vant,在控制台输入 npm i babel - plugin - import - D 或者 npm install babel - plugin - import -- save - dev 5.接下来我们去

阿里巴巴IconFont的图标的下载使用

阅读更多关于阿里巴巴IconFont的图标的下载使用

目前项目开发都是vue+element-ui模式，由于elementUI的icon图标库种类不多又不好看，所以基本不使用其自带的图标。一般都是引入第三方的图标资源，例如：fontawesome、或者阿里巴巴的iconfont。由于fontawesome的使用，会使得会全部下载所有的图标信息，使得项目变大，因此建议使用阿里巴巴的iconfont图标库。阿里巴巴矢量图标库地址： https://www.iconfont.cn/home/index ，里面有丰富的图标资源可选择。用法：　　1、直接下载.png文件格式，按照图片文件在项目中导入使用。　　2、下载.svg文件，按照svg文件再项目中使用，具体使用方法参考另一篇文章： https://www.cnblogs.com/luoxuemei/p/12154835.html 　　3、使用阿里巴巴图标项目管理功能，以下详细说明具体的使用方案。　　　　1）、选择所需的图标，加入购物车。　　　　　　2）、在购物车中，把所需的图标添加至项目。可新建项目或者选择以有的项目。　　　　　　对在此处新增的项目，其有默认的FontClass/Symbol和Font Family。我们可以自行修改，但是一定不要写成：el-icon-***这样的形式。如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突

vue+富文本编辑器UEditor

阅读更多关于 vue+富文本编辑器UEditor

vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式，网上找了几种富文本编辑器ueditor、tinymce等，觉得ueditor实现双向绑定还挺有意思，分享一下～按照下面步骤即可前言 vue2 https://github.com/yangTwo100/vue2UEditor vue-cli3 安装插件 npm i vue-ueditor- wrap // 或者 yarn add vue-ueditor-wrap 下载最新编译的UEditor 你可以登陆官网下载也可以使用一个修复好的版本点击连接修复好的内容如图所示：根据你的需要下载这八个中的一个即可。将下载好的压缩包解压并命名为UEditor 放入你的static目录下引入VueUeditorWrap组件 import VueUeditorWrap from ' vue-ueditor-wrap ' // ES6 Module // 或者 const VueUeditorWrap = require( ' vue-ueditor-wrap ' ) // CommonJS 注册组件 components: { VueUeditorWrap } // 或者在 main.js 里将它注册为全局组件 Vue.component( ' vue-ueditor-wrap ' ,

【Vue】---Vue.config常用配置项

阅读更多关于【Vue】---Vue.config常用配置项

一、前言　　Vue-cli3 搭建的项目相比较Vue-cli2界面相对较为简洁，之前的build和config文件夹不见了，那么应该如何配置如webpack等的配呢？二、基本配置　　只需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录） const path = require('path' ) module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 lintOnSave: false , // eslint-loader 是否在保存的时候检查 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md // webpack配置 chainWebpack: (config) => { }, configureWebpack: (config) => { if (process.env.NODE_ENV === 'production' ) { // 为生产环境修改配置... config.mode = 'production' } else { // 为开发环境修改配置... config.mode = 'development' } Object.assign(config,

【Vue】用单文件(SFC，Single File Components)开发自定义组件，把这些组件生成到一个JS里。

阅读更多关于【Vue】用单文件(SFC，Single File Components)开发自定义组件，把这些组件生成到一个JS里。

【Vue】用单文件(SFC，Single File Components)开发自定义组件，把这些组件生成到一个JS里。在页面里只要引用这个JS，就可以使用所有的自定义组件。 Vue是一个渐进式的JS框架，核心库只关注视图层，并且很容易与其他库或现有项目进行集成。比如我只想用Vue来构建页面的部分组件，那只要引入Vue核心库和自定义的组件即可。简单实例如下： custom-components.js Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) HTML里引入Vue核心库和custom-components.js，就能使用这个自定义组件。 <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Vue Component Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="custom-components.js"><

vue-cli2.0 与 vue-cli3.0 配置的区别

阅读更多关于 vue-cli2.0 与 vue-cli3.0 配置的区别

提示：要了解vue-cli2.0与vue-cli3.0区别，首先你要熟悉vue-cli2.0 从最明显最简单的开始项目目录结构可以明显的看出来，vue-cli2.0与3.0在目录结构方面，有明显的不同（vue3.0我是安装了css预处理器，所以看上去内容更丰富哈） vue-cli3.0移除了配置文件目录， config 和 build 文件夹同时移除了 static 静态文件夹，新增了 public 文件夹，细心的你，打开层级目录还会发现， index.html 移动到 public 中配置项 vue-cli2.0的域名配置，分为开发环境和生产环境，所以配置域名时，需要在config中的dev.env.js和prod.env.js中分别配置前面说过，到了3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同当然，没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变在3.0中，vue.config.js中有关于mock的配置要注意的是：mockjs是用来模拟产生一些虚拟的数据，方便前端在后端接口还没有开发出来时独立开发即使使用了真实的url，但是mockjs拦截了ajax请求

在用vue-cli4创建的vue2.x项目中通过vue-fontawesome使用fontawesome5

阅读更多关于在用vue-cli4创建的vue2.x项目中通过vue-fontawesome使用fontawesome5

前言本文写于2020年1月11日，仅提供最基本的引用方法，参考fontawesome5英文官方文档和vue-fontawesome英文官方文档。正文在vue项目中使用fontawesome5图标，不需要引入fontawesome组件，直接引入vue-fontawesome和相关组件就可以了。第1步：npm install 在vue项目目录中执行下面的安装命令： npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/vue-fontawesome 其中： @fortawesome/free-solid-svg-icons是solid风格图标 @fortawesome/free-regular-svg-ico是regular风格图标 @fortawesome/free-brands-svg-icons是品牌图标这三个可以根据项目实际需要选择性安装，当然如果有专业版授权，也可以引入诸如

手撸一个自己的前端脚手架

阅读更多关于手撸一个自己的前端脚手架

很多小伙伴一直很纠结什么是脚手架？其实核心功能就是创建项目初始文件，那问题又来了，市面上的脚手架不够用吗，为什么还要自己写？只要提到脚手架你就会想到， vue-cli 、 create-react-app 、 dva-cli … 他们的特点不用多说那就是专一！但是在公司开发中你会发现有以下一系列的问题! 业务类型多多次造轮子，项目升级等问题公司代码规范，无法统一在自己开发cli前，那肯定先要看些优秀的cli是如何实现的！虽然不是第一个吃螃蟹的人，那也要想想怎么吃更好_# 1.必备模块我们先从大家众所周知的vue-cli入手，先来看看他都是用了哪些 npm包来实现的 commander ：参数解析 --help其实就借助了他~ inquirer ：交互式命令行工具，有他就可以实现命令行的选择功能 download-git-repo ：在git中下载模板 chalk ：粉笔帮我们在控制台中画出各种各样的颜色 metalsmith ：读取所有文件，实现模板渲染 consolidate ：统一模板引擎先幻想一下要实现的功能: 根据模板初始化项目 quick-cli create project-name 初始化配置文件 quick-cli config set repo repo-name 2.工程创建废话不多说我们开始创建项目，编写自己的脚手架~~~

前端如何搭建一个成熟的脚手架

阅读更多关于前端如何搭建一个成熟的脚手架

前言有了之前的基础（前端如何搭建一个简单的脚手架），我们现在可以讲讲一个成熟的脚手架是怎么做了。这里我们参考vue-cli的源码，基于rollup和typescript一步步搭建。vue-cli作为vue的脚手架，给如此多的前端开发者使用，已经算是成熟了吧。开始以下我们的命令仍然是 ds ~，模板是 ds-cli-lib-template 目录结构 ├─ bin # 打包文件目录 │ ├─ ds.js # package.json里的bin字段引用文件 ├─ src │ ├─ lib # 具体命令目录 │ ├─ list # ds list │ ├─ init # ds init │ ├─ utils # 工具函数 ├─ main.ts # 入口文件 ├─ typings # typescript类型文件目录 ├─ rullup.config.js # rollpu构建配置 ├── test # 测试用例复制代码编写构建配置现如今，webpack用来开发应用（热更新hmr,代码拆分等）,rollup用来开发类库（简单易上手，打包后代码能读懂，至于其他的特性webpack目前基本已支持）。现在来明确我们的需求使用typescript编写模块代码打包成umd模块规范的代码可以引用commonjs规范的包（因为历史原因，大多数包都不是ES模块规范）压缩打包代码

写一个自用的前端脚手架

阅读更多关于写一个自用的前端脚手架

在工作中我们会用到很多便捷的脚手架工具，比如Vue的vue-cli，React的create-react-app等。极大的提高了我们的工作效率，那么今天我们就来学学怎么制作一款自用的前端脚手架。核心依赖 commander 命令行工具 download-git-repo git仓库代码下载 chalk 命令行输出样式美化 Inquirer.js 命令行交互 ora 命令行加载中效果 didyoumean 脚本命令匹配 fs-extra fs的替代品。 log-symbols 日志着色 semver 语义化日志控制 validate-npm-package-name 校验包名项目结构项目搭建在一个空文件下执行npm init 将以上依赖全部安装，执行npm install commander … validate-npm-package-name -S 1.初始化在根目录下新建`bin/luchx.js`文件，并添加以下代码首先文件第一行表示该文件运行于node环境，接着引入commander。最后的program.parse方法用于解析命令行中传入的参数。 2.添加第一个指令 command命令有两种用法，官方示例如下：其中参数对应的<>, [ ]分别代表必填和选填。这里我们使用第一种，添加如下代码： 3.添加监听–help事件执行结果交互说明 1

订阅 Vue CLI