vue-cli脚手架的搭建及vue项目中遇到的一些问题

最新推荐文章于 2024-05-11 07:40:01 发布

MIss-董董

最新推荐文章于 2024-05-11 07:40:01 发布

阅读量659

点赞数

分类专栏： vue 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/ddong345/article/details/104602019

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue-cli脚手架搭建

----逆战班----

随着vue.js越来越火爆,更多的项目都用到vue进行开发，在实际的开发项目中如何开发脚手架呢,今天跟大家分享一下,并且在项目中遇到的一些问题，怎么去解决…

首先需要了解以下的知识,你才能更好的去理解

html
CSS
Javascript
Node.js 环境(npm 包管理工具)
Webpack 自动化构建工具

一，安装node.js

当然，如果有安装，这一步不需要操作,那为什要安装node.js呢？因为vue-cli脚手架是基于webpack,而webpack是基于node

node官方下载
Node.js 源码或预编译安装包

二，安装cnpm

来自官网：“这是一个完整npmjs.org镜像，你可以用此代替官方版本(只读)，同步频率目前为 10 分钟
一次以保证尽量与官方服务同步。”

当然，此操作基于你有没有安装cnpm

说明：npm（node package manager）是nodejs的包管理器，用于node插件管理(包装、卸载、管理依赖等)；
使用npm安装插件：命令提示执行npm install
选装cnpm因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。所以乐于分享的淘宝团队干了这事！

安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

查询是否安装好且可查看cnpm的版本：cnpm -v

ps：yarn也是一个包管理器，是facebook发布的一款取代npm的包管理工具==>全局安装 yarn npm i -g yarn
(i是install的缩写)

三，安装vue-cli脚手架构建工具

vue-cli提供一个命令行工具，可用于快速搭建大型单页应用SPA (Single-page Application) 顾名思义在 Web
设计上使用单一页面，利用 JavaScript 操作 Dom 的技术实现各种应用，现今在介面上算是非常受欢迎的设计，搭配 AJAX
使得整体页面反应速度相当迅速，配合上路由懒加载等手段可以达到Native应用的体验

确认是否安装过vue-cli，没有则进行以下操作：

cnpm i -g @vue/cli

执行的命令运行

安装指定的版本

如是3.0以下的版本npm i -g vue-cli@版本号
如是3.0以上的版本npm i -g vue/cli@版本号

四，创建项目

首先创建项目的名称：vue create +自定义的文件名字

2.以下步骤根据你的项目的需求来选

3.如果出现下面显示说明你已经安装成功。
QQ图片20200223014927.png

提醒:Use ESLint to lint your code?:——这里强烈建议选no
否则你会非常痛苦，eslint的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度

4.安装好后，根据它的提示操作，输入cd projectname(你项目名称)
然后输入cnpm run server最后在网址打开http://127.0.0.1:8080/如下图
QQ图片20200223020454.png

vue项目中遇到的一些问题？？？

一个移动端项目一般分两个大部分，底部导航和路由展示

底部导航栏的写法

普通写法

template部分，其中to="/a",表示去到哪个配置的路由组件页面，而router-link 就是相当于a链接标签 ,则要去掉a链接标签就只需要在router-link上加上tag="span"，当然也可以是其他标签。那么导航栏如何显示高亮？activeClass="active"，就可以实现，当然样式自己去添加就可以了

<template>
  <div>
     <router-link to="/a" tag="span" activeClass="active">发现</router-link>
     <router-link to="/b" tag="span" activeClass="active">商城</router-link>
     <router-link to="/c" tag="span" activeClass="active">我的</router-link>
 </div>
</template>

2.v-for遍历的写法

html部分

<template>
  <div>
   <li v-for="(item,i) in filmList" :key="i" :class="{active:$route.matched[0].path==item.path}">
 <router-link :to="item.path" tag="span">{{item.name}}</router-link>
   </li>
  </div>
</template>

数据部分

data里定义一个List (或者通过其他方式比如ajax拿到List并存起来)

<script>
export default {
  data(){
    return{
      List:[
        {name:"电影",path:"/a"},
        {name:"影院",path:"/b"},
        {name:"我的",path:"/c"},
      ]a
    }
  }
}
</script>

3.第三种写法

html部分

<template>
<div>
<router-link tag="li" v-for="item in List" @click=routeTo(item) v-text="item.name"></router-link>
</div>
</template>

数据部分

<script>
export default {
  data(){
    return{
      List:[
        {name:"电影",link:"/a"},
        {name:"影院",link:"/b"},
        {name:"我的",link:"/c"},
      ]a
    }
  }
}
</script>

轮播图的写法

普通写法

html部分

可能有的朋友认为这样写，图片会出来，实际上…

 <template>
      <div>
         <img  v-for="(p,i) in list" :key="i" :src="p" alt="Vue logo">
      </div>
  </template>
  <script>
   export default {
     data(){
       return{
          List:[
         "../assets/img/pic.jpg",
         "../assets/img/pic2.jpg" ,
        "../assets/img/pic3.jpg",
        "../assets/img/pic4.jpg",
        "../assets/img/pic5.jpg",                  
      ]
    }
  }
}
</script>

而事实上，却成了这样
QQ图片20200223123222.png

那要怎么解呢？只需要在../assets/img/pic.jpg前面加上require，它是通过require的一个方式进行解析的。如果在html里面直接写入图片的路径，是没有问题的，浏览器解析的时候，它知道这是一个图片路径去加载，那通过js写在data里面就不行了呢？就跟webpack配置有关系，最终打包完后会生成对应的js和css，它在解析的过程中，相当于把这个地址../assets/img/pic4.jpg直接的解析了，而没有通过对应的js来进行解析。

require("../assets/img/pic.jpg"),
require("../assets/img/pic2.jpg")

怎么实现图片对应的轮播效果，首先页面上默认只展示一张，用v-show来控制一个图片的显示和隐藏，那么哪张图片显示，哪张图片隐藏呢？只需要定义n的值，通过判断，如果n的值跟图片的索引值相等的时候它才显示，n==i，只需要添加一个定时器，每隔多少秒，图片n++，

methods:{
        play(){
         this.timer=setInterval(this.autoPlay,2000)
        },
        autoPlay(){
            this.n++;
            if(this.n==this.list.length){
                this.n=0;
            }
        },
        handleClick(i){
            this.n=i
        }     
    },
    mounted(){
        this.play()
    },
    destroyed(){
        clearInterval(this.timer)
    }
}

数据之间的传递方式和请求

1.路由间的参数传递（query和params）

query和parmas的使用方式大致相同，这里简单介绍一下路由配置、参数的传递和调用

params，参数不显示在url，刷新页面数据消失

// router的配置
    {
      path: "/two",
      name: "two",
      component: two
    }
// 跳转,这里message为123
　　　　   this.$router.push({
　　　　　  name: \`two\`,  　　// 这里只能是name，对应路由
　　　　　　params: { id: this.message, data: 456 }
　　　　});
 // 接收
　　created() {
      this.msg1=this.$route.params.id    // 123
      this.msg2=this.$route.params.data　　// 456
   }    
// url显示，数据不显示在url  
　　/two

2.query，参数显示在url

// router的配置
    {
      path: "/two",
      name: "two",
      component: two
    }
// 跳转,这里message为123
　　　　this.$router.push({
　　　　　　path: \`/two\`,　　　　// 这里可以是path也可以是name（如果是name，name:'two'），对应路由
　　　　　　query: { id: this.message, data: 456 }
　　　　});
  // 接收
　　created() {
      this.msg1=this.$route.query.id    // 123
      this.msg2=this.$route.query.data　　// 456
   }
// url显示，数据显示在url
　　/two?id=123&data=456_

3.axios的引入
首先axios要安装，全局安装cnpm i axios -S，然后在需要的页面引入import axios from "axios";当然需要后端提供接口。如果每个页面都需要请求数据，那这样太过于麻烦，所以只需要在main.js里这样写，后面页面需要用到的axios就不需要引入了

import axios from "axios";

//axios里默认的属性   定义公共的端口地址，那么在需要的页面就不需要这个前面的部分，以及方便后面修改
axios.defaults.baseURL="http://127.0.0.1:6222"

// 把axios存储在vue的原型对象中，$http自定义的名称
Vue.prototype.$http=axios;
那么对应的axios，就是this.$http

//http://127.0.0.1:6222/home/page/1/10"
mounted(){ 
this.$http.get("home/page/1/10").then(res=>{
      console.log(res)
    })
  }

暂时就写这么多了😄，后面再继续…

MIss-董董

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-cli脚手架的搭建及vue项目中遇到的一些问题

Vue-cli脚手架搭建----逆战班----随着vue.js越来越火爆,更多的项目都用到vue进行开发，在实际的开发项目中如何开发脚手架呢,今天跟大家分享一下,并且在项目中遇到的一些问题，怎么去解决…首先需要了解以下的知识,你才能更好的去理解htmlCSSJavascriptNode.js 环境(npm 包管理工具)Webpack 自动化构建工具一，安装node.js当...
复制链接

扫一扫