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

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

　　

 

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

　　

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

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

　　　　　　border-radius: 6px;

　　　　　　color: green;

　　　　}

　　　　.home{

　　　　　　color: $redColor;

　　　　　　.head{

　　　　　　　　background: green；

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

　　　　　　}

　　　　}

　　

 

5、swiper

　　npm install [email protected] 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) 

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"  />