vue项目常用插件的引入方法

1、vue文件的style标签引入外部css样式

　　<style>

　　　　@import  './assets/css/index.css'

　　</style>

2、在js文件中引入css样式

　　import  './assets/font/iconfont.css'

3、element-ui

　　npm install  element-ui  -S

　　import ElementUI from 'element-ui';

　　import 'element-ui/lib/theme-chalk/index.css';

　　Vue.use(ElementUI);

4、sass

　　npm  install  node-sass  --save-dev

　　npm  install  sass-loader@^7.3.1  --save-dev

　　npm  install  style-loader  --save-dev

　　<style  lang="scss">

　　　　$redColor: red;　　// 使用$开头定义变量

　　　　@mixin  baseSet{　　// 使用@mixin + 名称 定义混合器

　　　　　　border-radius: 6px;

　　　　　　color: green;

　　　　}

　　　　.home{

　　　　　　color: $redColor;

　　　　　　.head{

　　　　　　　　background: green；

　　　　　　　　@include  baseSet;　　// 使用@include + 名称 使用混合器

　　　　　　}

　　　　}

　　</style>

5、swiper

　　npm install swiper@5.4.5 vue-awesome-swiper --save

　　import VueAwesomeSwiper from 'vue-awesome-swiper'

　　import 'swiper/css/swiper.css'

　　Vue.use(VueAwesomeSwiper)

　　注意：安装最新版本的swiper，有些功能有问题

6、粒子特效

　　npm install vue-particles --save-dev  

　　import VueParticles from 'vue-particles'  

　　Vue.use(VueParticles) 

<vue-particles

color="#fff"

:particleOpacity="0.7"

:particlesNumber="60"

shapeType="circle"

:particleSize="4"

linesColor="#fff"

:linesWidth="1"

:lineLinked="true"

:lineOpacity="0.4"

:linesDistance="150"

:moveSpeed="2"

:hoverEffect="true"

hoverMode="grab"

:clickEffect="true"

clickMode="push"  />

7、echart

　　npm  install  echarts  --save

　　import  echarts  from  'echarts'

8、vue-count-to

　　数字滚动插件

　　npm  install  vue-count-to  --save

　　import  Counto  from  'vue-count-to'