安装vue-cli脚手架使用swiper

首先有node，查看版本 node -v npm -v

安装vue-cli脚手架，安装代码为：npm install -g vue-cli

我们在这里选择的是全局安装，安装完之后创建项目。

进入项目cmd或者终端进入 cd 项目

vue init webpack +项目名

首先是项目名,项目描述,作者,搭建vue项目,是否路由这几项都可以手动输入或是选择yes ; 从是否规范代码向下的三项都选择no,方便写代码,如果采用代码规范的话编写代码时必须按照ESLint格式编写,否则会报错

最后一项选择yes,等待项目搭建好即可

cd 项目名然后 npm install 最后 npm run dev

最后启动项目

更改首页

首先,在APP.vue中我们需要改下页面样式,将margin-top改为 0

然后找到router中的index.js将显示页面改写一下

import Vue from 'vue'

import Router from 'vue-router'

import Thefirst from '@/components/Thefirst'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/Thefirst',

name: 'Thefirst',

component: Thefirst

}

]

})

在vue脚手架中使用swiper

swiper。css。js地址下载文件：下载Swiper - Swiper中文网

在需要使用的.vue文件引入swiper

import '../assets/js/swiper.min.js'

// 这两行是因为低版本错误：那个版本中实例化之后没有autoplay这个属性和pagination分页属性，所以在实例化的时候，设置的那些属性根本不生效

import Swiper2, { Navigation, Pagination, Autoplay } from "swiper";

Swiper2.use([Autoplay, Navigation, Pagination]);

import Swiper from 'swiper';

export default {

name: 'Thefirst',

data () {

return {

msg: 'Welcome to Your Vue.js App'

}

mounted(){

var myswiper = new Swiper(".swiper-container",{

autoplay:{

delay:1000

disableOnInteraction: false,

loop:true,

// 如果需要分页器

pagination: '.swiper-pagination',

// 如果需要前进后退按钮

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

// 如果需要滚动条

scrollbar: '.swiper-scrollbar',

})

}

</script>

css：@import '../assets/css/swiper.min.css';

安装vue-cli脚手架使用swiper相关推荐

Windows PowerShell安装指定版本vue/cli脚手架失效解决办法；vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue
mac搭建vue项目看这篇打开shift--鼠标右键,就可以打开Windows PowerShell 1.安装vue/cli npm install -g @vue/cli@3.12.0 @后面是版 ...
离线安装vue脚手架，内网安装@vue/cli
公司开发环境使用内网,无法用外网,搭建环境的时候,发现内网系统没有安装vue脚手架,我搜了很多文章,发现他们的方法对我都不适用,然后就自己摸索,最终皇天不负有心人,终于被我安装上了,一下是我内网离线安 ...
#VUE CLI 脚手架的安装及初识脚手架（一）
目录 vue cli 安装vue cli cli是什么? 1.CLI英文为Command-Line Interface,翻译为命令行工具,通俗来讲为脚手架. 2.使用vue-cli可以快速搭建Vue开 ...
1. Vue CLI脚手架
1.1 介绍 Vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板,是Vue官方提供的标准化开发工 ...
安装@vue/cli报错，npm ERR! gyp ERR! not ok
在执行命令 npm install -g @vue/cli 来安装vue脚手架时,出现下图所示的错误,最后发现是镜像源的原因导致安装失败. 解决方式: 1.安装淘宝镜像源: npm install - ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
安装Vue CLI项目（Vue2.0）
一.Vue CLI脚手架(Vue2.0) Vue CLI官方文档:官方文档 1.什么是脚手架命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及 ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
Vue 全家桶之 vue cli (脚手架)
一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口命令 ...
安装Vue的脚手架时遇到的无法安装问题
项目场景:安装Vue的脚手架时遇到的无法安装问题问题描述以管理员身份进入命令控制符想要安装Vue的脚手架,提示安装成功后输入vue指令检查却显示:'vue' 不是内部或外部命令,也不是可运行的程序 ...

安装vue-cli脚手架使用swiper

在vue脚手架中使用swiper

安装vue-cli脚手架使用swiper相关推荐

最新文章

热门文章