在vue-cli的组件模板里使用font-awesome的两种方法

yibawuqing 2018-09-28

方法一：

npm install font-awesome

在main.js里添加import 'font-awesome/css/font-awesome.css'

方法二：

在官网下载代码到本地，现在应该是font-awesome-4.7，把整个文件夹放到static文件夹中，然后在index.html中加上<link

rel="stylesheet" href="/static/font-awesome-4.7/css/font-awesome.min.css" rel="external nofollow" >，应该就可以了。

使用方法：<i class="fa fa-home fa-lg"> 主页</i>

yibawuqing

yibawuqing

相关推荐

vue Cli 环境删除与重装教程 - 版本文档

vue-cli 3.0+版本，使用的不是vue-cli，而是@vue/cli；如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的命令。　　　　dry: false, //设置为f

Macuroon / 0评论 2020-09-11

第一个Vue页面

安装完后，打开cmd命令行界面。安装yarn(fackbook依赖管理工具与Npm功能一样，推荐使用！！！--- 是否安装vue路由 -->. --- 是否启动ESLint代码检测 -->. --- 是否设置单元测试 -->. --- 是

hline / 0评论 2020-07-29

基于vue-cli搭建vue项目开发环境

vue-cli是vue的脚手架工具，用于快速搭建vue项目。让开发者只关心项目本身，而不去关注项目的开发环境。在安装vue-cli之前，我们先安装webpack，在命令行工具输入下面代码。，这里就默认你安装node.js. webpack-simple

不知道该写啥QAQ / 0评论 2020-07-18

Vue2全家桶之一：vue-cli（vue脚手架）超详细教程

都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、

helloxiaoliang / 0评论 2020-06-21

Jenkins自动部署VUE-CLI

# 复制文件cp -r D:\Jenkins\Jenkins\workspace\demo\dist\* D:\vue

xiaodaiwang / 0评论 2020-06-11

Vue-cli webpack打包之后index.html缺少引号的问题

下面是通过webpack npm run build打包之后生成的index.html文件，可以看到缺少引号

不知道该写啥QAQ / 0评论 2020-05-17

vue-cli4 + TS构建新项目

　　选择自己配置。　　(*) Babel // JavaScript 编译器，用于将 ECMAScript2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。　　(*) TypeScript

xiaofanguan / 0评论 2020-05-11

手把手做一个基于vue-cli的组件库（上篇）

基于vue-cli4的ui组件库，先贴个最终效果吧，步骤有点多，准备分上下篇，上篇：如何做一个初步的组件。同级别创建packages目录，用来存放组件。现在的目录结构如下：。重新运行项目成功即可。// 把 packages 和 examples 加入编译，

HeliumLau / 0评论 2020-05-03

基于vue-cli快速构建

Test是项目名称，这个名字自己随便取。Project name 项目名称，可以自己指定，也可直接回车，按照括号中默认名字，阮一峰老师博客为什么文件名要小写 ，可以参考一下。是否安装e2e测试 ，我选择安装

tozeroblog / 0评论 2020-02-21

vue-cli配置，hello world 运行

你可以选默认的包含了基本的Babel+ESLint设置的preset，也可以选手动选择特性来选取需要的特性。TypeScript: javascript类型的超集。Progressive Web App Support: 支持渐进式的网页应用程序。　　v

webfullStack / 0评论 2020-02-11

vue-cli（vue的脚手架搭建过程）

　vue-cli定义：是脚手架工具，作用就是用配置好的模板迅速搭建起一个项目，省去了自己配置webpack文件。　　　　3）安装淘宝镜像。安装完输入 cnpm -v，检查是否安装成功，之所以安装它，是为了安装速度，原本npm的服务器是外国的，速度会很慢。　

csm0 / 0评论 2020-01-12

Vue--Vue-CLI创建项目

在之前我们使用webpack进行打包的时候，webpack.config.js配置都是我们自己手写的。而Vue-CLI是官方提供的，用来搭建项目脚手架的工具，它是vue.js开发的标准工具，它已经集成了webpack，内置好了很多常用配置，使得我们在使用v

yezitoo / 0评论 2020-01-11

搭建vue-cli项目和打包项目

vue-list 可以查看vue所有的组件；选用模板常用的是webpack与webpack-simple。webpack-simple是基于进行配置的版本，而webpack模板则是基于Webpack ^1.3.2配置的。其中，最大的区别是webpack-s

HeliumLau / 0评论 2019-12-07

基于vue-cli的vs code设置

"editor.tabSize": 2,"javascript","javascriptreact","language": "vue",},"h

学知不足业精于勤 / 0评论 2019-11-30

搭建Vue从Vue-cli到router路由护卫的实现

别的不多说,开始动爪把,

Dickzeng / 0评论 2019-11-14

vue-cli中配置webpack系列文章七 ------ webpack.prod.conf.js

// ExtractTextPlugin会将所有的「入口 chunk」中的 require 移动到独立分离的css文件。因此，样式不再内联到javascript里面，但会放到一个单独的css包文件 当中。如果样式文件较大，这会更快，因为样式文件会跟java

心动 / 0评论 2019-11-17

vue-cli中配置webpack系列文章六 ------ webpack.dev.conf.js

// 在开发环境下生成cssSourceMap，便于调试。// 配置Source Maps 在开发中使用cheap-module-eval-source-map更快

王军强 / 0评论 2019-11-17

vue-cli中配置webpack系列文章五 ------ webpack.base.conf.js

var vueLoaderConfig = require('./vue-loader.conf'). },filename: '[name].js',},extensions: ['.js', '.vue', '.json'],},test: /\.vu

webfullStack / 0评论 2019-11-17

vue-cli中配置webpack系列文章三 ------ utils.js

var ExtractTextPlugin = require('extract-text-webpack-plugin'). loader: 'css-loader',function generateLoaders (loader, loaderOpt

Macuroon / 0评论 2019-11-17

vue-cli中配置webpack系列文章一 ------build.js

var ora = require('ora');var webpack = require('webpack');var path = require('path');var config = require('../config/index');var

彻底拆分一切可控 / 0评论 2019-11-17

vue-cli配置全局sass、less变量

vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果上面安装失败的话，就分别安装 style-resources-loader 和 vue-cli-plugin-st

wghou / 0评论 2019-11-17

express搭建纯后台，前台使用vue-cli脚手架

、app.get()表示接收所有前端来的get请求方式，同理，app.post(),app.delete()分别表示接受前端发来的post请求与delete请求方式。 app.get()中的第二个参数---回调函数：该回调函数接受3个参数,按照大多数人的不

MrHaoNan / 0评论 2019-11-07

使用webpack配置一个小型vue-cli脚手架

使用vue的朋友都是知道vue-cli，他是一个基于webpack的vue脚手架，通过vue-cli配置好一整套环境可以更快的开发，从而提高了工作效率。而我们可以学习它的一些配置可以熟悉webpack的构建流程，从而更好的开发，本文讲述了如何配置一个小型的

monkeysuo / 0评论 2019-11-04

vue-cli脚手架源码解析(三)

从上而下，逐行解析代码。class Creator extends EventEmitter { // Creator继承EventEmitter，EventEmitter就是node的事件模块。// name就是我们传的项目名如hello-word,

mirahs / 0评论 2019-11-04

vue本地环境API代理和解决跨域

我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，localhost是没有办法设置cookie的。我们可以在vue-cli配置文件里面设置一个代理，跨域的

ingwengang / 0评论 2019-11-04

vue-cli 基本配置

在vue3.0开始普及的时候，同时也收到了消息得知，从前使用vue2.0的各种依赖包在今后的更新中不再适用老版的vue，因此在新的项目中使用了vue3.0版本，以下是配置vue3.0的基础功能。根据2.0的原始方法，将vuex分为state.js、muta

墨龙吟 / 0评论 2019-11-04

vue-cli项目中使用svg图标

在src/icons/index.js中使用webpack的require.context自动引入src/icons下面所有的图标。首先需要注意的是，通过 vue-cli3 构建的项目可以初始化进行很多选择，我构建的目录更多的是以 *.config.js

wallowyou / 0评论 2019-11-02

vue-cli项目代理proxyTable配置exclude的方法

如果是前后端分离的项目，本地开发环境需要访问mock，或者在调试时直接访问线上的接口，这时候就会有接口跨域的问题。以vue-cli生成的项目为例，需要配置 config/index.js 中的 proxyTable 属性，大概如下：。配置规则在网上搜pro

BluewineY / 0评论 2018-09-20

vue-cli 3.x 修改dist路径的方法

前端的世界真的太奇妙，更新速度真的跟火箭一样。没有一颗真正热爱它的心，真的很难继续走下去。前段时间 Node 之父 Ryan Dahl 发布新的开源项目 deno，受到了大量的关注。Ryan Dahl直言node是一个失败品，充斥很多bug和设计上的不合理

fengminw / 0评论 2018-09-19

vue新vue-cli3环境配置和模拟json数据的实例

最近在研究学习vue，发现环境配置特麻烦，就是跟着文档步骤一步一步来，也会遇到各种想不到的坑，vue-cli3的配置比老的简洁了很多，与以往的配置也有所不同：。// use the full build with in-browser compiler?/

cocoer / 0评论 2018-09-19

在Vue-cli里应用Vuex的state和mutations方法

需要用到计算属性computed和vuex的mapState:. 结果，每次的改变，父组件的<h1>都会跟随改变。这就是vuex的小小的应用实现。

Callmesmallpure / 0评论 2018-09-16

vue-cli webpack 引入swiper的操作方法

2：下载好swiper相关的js和css，js放在static目录下，css放在assets目录下。

sunling / 0评论 2018-09-15

解决vue-cli项目webpack打包后iconfont文件路径的问题

在使用vue-cli创建vue项目时，可以自动生成webpack文件。全部样式文件打包在css目录下app.hash.css文件中。但我们会发现发布后，会存在字体文件找不到的问题，查看css文件发现是iconfont字体文件的路径引用问题。而不再需要手动更

Macuroon / 0评论 2018-09-01

webpack4+Vue搭建自己的Vue-cli项目过程分享

最近在看webpack4，深感知识浅薄，这两天也一直在思考cli的配置，借助一些别人的实践，尝试自己搭建vue的项目，这里使用webpack4版本，之前我在网上查找别人的vue项目搭建,但是都是webpack3的,所以写了本文，如果有错误,或者有什么问题,

白日强 / 0评论 2018-08-29

vue-cli2打包前和打包后的css前缀不一致的问题解决

最近基于vue-cli2 学习webpack，将vue-cli2的webpack配置强撸了一遍，感觉身体已被掏空。。。但还是收获不少的，起码掌握了webpack的一些基本套路、开发环境和生产环境的概念、根据不同的环境写不同的webpack配置、和一些常用插

waterv / 0评论 2018-08-24

详解vue-cli脚手架中webpack配置方法

webpack是一个module bundler，所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。webpack支持AMD和CommonJS，以及其他的一些模块系

Macuroon / 0评论 2018-08-22

详解在vue-cli中使用graphql即vue-apollo的用法

npm install Csave vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag. /* 这个属性的意思是在同

HelloWood / 0评论 2018-09-08

vue-cli监听组件加载完成的方法

在使用vue-cli开发项目时遇到过一个问题，要求是页面组件全部加载完成后再执行某个函数，给上代码参考，方法可能有点笨，好在实现了功能。

lbPro0 / 0评论 2018-09-07

Vue-cli 中安装并使用less

首先安装vue-cli，网站教程多多，在这不多说。接下来在vue项目目录下，运行。npm install less less-loader --save-dev等待安装成功即可，接下里我们可以在vue项目中的package.json中看到less的相关依赖

wghou / 0评论 2019-10-27

根据vue-cli手摸手实现一个自己的脚手架

身为一个入门前端七个月的小菜鸡，在我入门前端的第一天就接触到了vue，并且死皮赖脸的跟他打了这么久的交到，还记得第一次用vue init webpack 这句命令一下生成一个模板的时候那种心情，当时我就想，要是自己也能写一个的话，那会是灰常吃鸡的吧 o(￣

gloria0 / 0评论 2019-10-04

vue项目-创建项目

npm install webpack -g //webpack是一个包管理工具，也是vue-cli的构建工具，全局安装。browserify：一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。//'gi

xingye / 0评论 2019-09-08

使用vue-cli创建基于vue.js的iview工程

vue-cli是一个vue.js提供的脚手架，可以快速构造项目结构。6．vue init webpack vue-cli-webpack 创建一个以webpack为模板的名字为vue-cli-webpack的项目；根据提示默认执行即可。原因：大多是jso

FoolishInfanta / 0评论 2017-11-18

vue-cli随机生成port源码的方法

el.style.color = '#' + Math.random().toString.slice(2,8);//随机颜色。以上所述是小编给大家介绍的vue-cli随机生成port源码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大

如狼 / 0评论 2019-09-02

Vue-CLI 项目在pycharm中配置方法

以上所述是小编给大家介绍的Vue-CLI 项目在pycharm中配置方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对安科网网站的支持！

CurtainOfNight / 0评论 2019-08-30

vue-cli webpack配置文件分析

相信vue使用者对vue-cli都不会陌生，甚至可以说，很熟悉了，但对其webpack的配置可能知之甚少吧。过完年回来后，我接手了公司的新项目。很自然，我就想到了vue-cli脚手架了，当时研究一下它的webpack配置。今天这篇文章，是在原来的基础上，增

fengminw / 0评论 2019-05-20

vue项目搭建以及全家桶的使用详细教程(小结)

首先，我们可以通过npm安装vue-clic,前提是我们需要有node环境，如果电脑还没安装node，先安装，可通过。查询node的版本号，有版本号则已经安装成功；接下来，我们需要确保电脑已经安装了webpack，webpack是一个包管理工具，也是vue

fengminw / 0评论 2018-12-19

在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟

本文以 Vue-CLI 为例介绍引入 simple-mock 实现前端开发数据模拟的步骤。本质上这里介绍的是在 webpack-dev-server 中配置 simple-mock 实现 API Mock，所以适用于任何采用 webpack 的前端项目。s

安卓猴 / 0评论 2018-11-28

vue-cli 2.*中导入公共less文件的方法步骤

在新版的Vue CLI 3中，如何导入公共less文件在文档里已经描述的很清楚了，但是在2.*的版本中，我没有查到相关的办法，网友的办法又相当复杂，于是我推荐给大家一个很简单的办法。简单的看下来就是需要哪种类型的样式就去加载对应的预处理器，因此只需要在加载

冰蝶 / 0评论 2018-11-22

vue-cli3.0如何使用CDN区分开发、生产、预发布环境

前言：上一篇记录文vue-cli 3.0 build包太大导致首屏过长的解决方案中提到了CDN优化，之前是直接在html中手动注入JS，也没有对开发和生产模式进行区分，因为是使用收费的CDN，所以在开发模式会遇到无权使用CDN的问题。要是使用CDN写死在h

xingye / 0评论 2018-11-22

基于Vue-cli快速搭建项目的完整步骤

vue-cli 是一个官方发布 vue.js 项目脚手架，Vue-cli可以快速帮助我们创建一个项目，这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。安装完成后，同时在C:\Users\Andminster\AppData\Roaming

FavoriteStudent / 0评论 2018-11-03