快速新建一个vue项目,安装脚手架

在桌面新建一个空文件夹,拖动文件夹到编辑器打开,  打开命令窗口

 

1)安装之前检查是否已经安装node环境,如果有我们就进行接下来的vue-cli的安装,若果没有我们则先安装node环境。

2)安装vue-cli脚手架,安装代码为:npm install -g vue-cli,我们在这里选择的是全局安装,安装完之后创建项目。

这里注意下网络,网络不好时推荐使用淘宝镜像或者更换成自己的网络。网太差容易安装失败。

3)然后根据提示选择会否安装插件,如果安装则选择Yes,如果不安装则选择No,知道插件选择完成。

输入vue init webpack +项目名,我写的是魅族官网所以写了mz,下方报错是由于项目名里包含了大写字母,在这里点击项目重构,重构项目目录即可更改.

4)接下来就是确认和写入你的项目基本信息

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

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

5)之后我们cd切换到项目目录,然后安装项目依赖,项目依赖的安装代码为:npm install

例如你需要安装jQuery,就在命令行输入npm install jQuery即可,其他的项目依赖也是如此,也可以安装mui、bootstrap框架等

6)安装项目依赖我们一般是安装在项目内容外的,有的人也喜欢安装在项目内容里,

现在我们来运行一下项目,首先我们要找到我们的项目,输入代码cd+项目名,也就是我们最上面写到的vue init webpack +项目名里的项目名,如果你不记得了可以在编辑器的工作目录栏里打开项目,项目里的文件夹名就是你一开始的项目名称,

ok,好了,我们来运行一下项目npm run dev让项目跑起来,生成相应的端口号,点击地址即可浏览网页

这样我们的vue脚手架就安装好了,现在我们来看下魅族的官网

  

后一页是我自己写的,现在我们需要将自己写的页面丢出来在网页上,我们就需要改下代码了

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  padding: 0;
}
</style>

然后找到router中的index.js将显示页面改写一下,在下图中红框标出的位置改为自己需要展示的页面

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main
    }
  ]
})

改好显示后我们来看下自己写的页面

<template>
   <div id="main">
     <div class="swiper-container">
       <div class="swiper-wrapper">
         <div class="swiper-slide">
           <img src="https://fms.res.meizu.com/dms/2018/08/08/393cefef-c09b-4a5f-80b5-cbe18c5d1d86.jpg"/>
         </div>
         <div class="swiper-slide">
           <img src="https://fms.res.meizu.com/dms/2018/08/08/4d73f7c9-d3a5-42b7-ac67-1504ef4d8d17.jpg"/>
         </div>
         <div class="swiper-slide">
           <img src="https://fms.res.meizu.com/dms/2018/08/08/64b6693a-b4a1-4644-8cb4-bfa589a38c8f.jpg"/>
         </div>
         <div class="swiper-slide">
           <img src="https://fms.res.meizu.com/dms/2018/08/07/3027a74e-ceed-4f56-9473-85c3b638e572.jpg"/>
         </div>
         <div class="swiper-slide">
           <img src="https://openfile.meizu.com/group1/M00/05/C1/Cgbj0VtfzZCAd93kAARQaXMtqM0781.jpg"/>
         </div>
       </div>
       <!--导航条-->
       <div class="top-nav">

       </div>
       <!--分页器-->
       <div class="swiper-pagination"></div>
     </div>
   </div>
</template>

<script>
import Swiper from 'swiper/dist/js/swiper'
    export default {
        name: "#main",
      mounted(){
       var myswiper = new Swiper(".swiper-container",{
          autoplay:{
            delay:3000
          },
          loop:true,
          pagination:".swiper-pagination",
        })

      }
    }
</script>
<style scoped>
  body{
    margin: 0;
    padding: 0;
  }
#main{
  width: 100%;
  height: 1000px;
  background: aquamarine;
}
  .swiper-container{
    width: 100%;
    height: 670px;
  }
  .swiper-slide img{
    width: 100%;
    height: 100%;
  }
  .top-nav{
    position: absolute;
    width: 100%;
    height: 100px;
    background: bisque;
    top: 0;
    left: 0;
    z-index: 100;
  }
</style>

在这一步上遇到的问题是引进css样式,路径没问题,却还一直报错我用了四种方法,才让swiper框架的css成功引进的,下面我们来看看引进的方式

1)import './../..node_modules/swiper/dist/css/swiper.min.css'    在main.js上方引入css,但是未成功,路径没问题

2)在webpack.base.conf.js中加入以下代码,似乎不管用

  {test: /\.css$/,
    include
:
  [
    src/,//表示在src目录下的css需要编译
    'node_modules/swiper/dist/'   //增加此项
  ],
    loader
:
  'style-loader!css-loader'

}

3)@import "`swiper/dist/css/swiper.min.css",百度上的方法,路径会提示,但是也没用

4)在尝试了多种方法后我们的第四种方法闪亮登场了

https://www.cnblogs.com/wangzhichao/p/7652749.html中我看了下王志超的博客,它的三种方法都可以用,如果有小伙伴在写vue项目时用到swiper框架时,可以看看他的引用方式

在css成功引用后我们看到魅族原网上轮播图部分带着导航条的,这个时候我们就得自己写了,swiper-container属性中自己有position:relative属性,因此,我们将导航条写入到swiper-container盒子中,swiper-wrapper盒子的下方,如上方代码所示,再进行编写即可,好了,今天的博客就到这了,等我好好写好一个项目了再来更新!

加油!!!

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页