您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页基于Vue_CLI3快速上手Vue

基于Vue_CLI3快速上手Vue

来源:二三四教育网

近期团队有需求承接一些H5方面的开发,为了方便团队成员快速从原生移动端切入前端,特梳理一篇Vue快速上手文章。

概念理解

WebPack :前端资源模块化管理和打包工具,模块打包机。它做的事情包括分析项目的项目结构,将松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

Vue_CLI3 :脚手架工具,借助WebPack用于快速构建标准vue项目。其作用是用配置好的模板迅速搭建起一个项目工程,省去自己手动配置webpack配置文件的内容,快速上手工程级别的项目开发,降低入门门槛。

一、vue环境配置

名称 地址
Vue官方文档
Vue Github
VueCli官方文档
VueCli Github
1. Node环境配置
#查看本地Node版本
$ node -v 
#查看本地Npm版本
$ npm -v 

如果可以如下正常输出版本信息,说明本地已安装过node环境,则可开始后续操作。

  • 本地node环境版本
  • node官网下载安装
2. Vue环境配置

安装最新版本VueCLI

# 最新稳定版
$ npm install vue
# 安装vue_cli3.x版本脚手架
$ npm install -g @vue/cli   
# 或者用下述命令
$ yarn global add @vue/cli
#安装完后,输入命令行查看vue版本
$ vue -V  
#或者用下述命令
$ vue --version
  • 因为本人使用的是mac,有使用windows同事跟着该篇教程配置走的时候,遇到了一个问题。如果输入vue -V 出现vue不是内部或外部命令提示,此时需要将vue的安装路径配置到path内即可。我给出一个链接,大家可以安装该链接操作来解决该问题。
  • 可以通过vue -h查看常用命令

    上述命令行操作基于vue_cli3.x版本,关于旧版本需要先通过下述命令先卸载它

$ npm uninstall vue-cli -g 
或 
$ yarn global remove vue-cli 。
3.安装淘宝cnpm

因为npm安装插件从国外服务器下载,受网络影响大,所以一般使用会配置淘宝镜像,cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm。
安装cnpm
(1)输入以下命令

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

(2)输入cnpm -v查看配置是否正常

$ cnpm -v

二、Vue-cli构建项目

当前构建项目主要通过两种方式:

1. 命令行创建:vue create projectname
$ vue create vue-demo 
  • 当创建一个新项目时配置的一些信息
    进入新创建的项目目录,运行命令即可启动项目
2. GUI页面创建:vue ui
$vue ui
  • 敲完命令会打开一个浏览器窗口,将以图形化界面将你引导至项目创建的流程

    下图为一个新建的项目的基础目录结构,项目由VisualStudioCode打开。

  • 目录结构
项目主要目录结构介绍

整个项目入口html在public/index.html,入口js在src/main.js 下

  • 2.1 node_modules 主要为引用的一些组件模块信息
  • 2.2 public 目录下index.html为项目html主入口
  • 2.3 src 目录下的man.js为整个工程入口js,其它则为开发时组件、页面、资源等文件分类目录
  • 2.4 browserslistrc:配置浏览器的要求,css针对不同浏览器会有兼容性问题。配合postcss的autoprefixer插件使用
  • 2.5 eslintrc.js 是一个代码规范和错误检查工具配置,对于不符合规则要求的写法会报错
  • 2.6 gitignore 忽略哪些文件无需上传
  • 2.7 babel.config.js 文件预设
  • 2.8 package-lock.json npm5以上锁版本的功能,不会重复安装,版本管理的一个文件
  • 2.9 package.json 项目的一系列描述和依赖
  • 2.10 postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

autoprefixer依据什么抓前缀呢,就是依据browserslistrc的内容

三、基础语法

1. 基础数据、事件和方法
  • v-text: 标签会被转义,v-text会将元素当成纯文本输出
  • v-html:不会被转义,会将元素当成HTML标签解析后输出
  • v-on:click:在实际使用中一般直接@click来使用
<template>
  <div>
   //这里用v-html和v-text 将会出现不同的效果
    <div v-html="content"></div>
    <button @click="handleClick">Click</button>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      content:"Hello<br>Ricky"
    };
  },
  methods: {
    handleClick: function() {
      alert('click');
    }
  }
};
</script>
2. 属性绑定和双向绑定
  • v-bind: 属性绑定语法,在实际运用中一般直接用:即可
  • v-model &{{}}:双向绑定语法
<template>
  <div>
    //这里将data中的值赋予了title这个属性,这里全写实际为v-bind:title = "title"
    <div :title="title">
    //通过v-model和{{}} 将输入框中所输入字符串和文本中显示字符串一一致,即同步引用了data中的content。
      <input v-model="content">
      {{content}}
    </div>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      content: "Hello<br>Ricky",
      title: "this is a title"
    };
  }
};
</script>
3. 计算属性和侦听器
  • computed:{} :计算属性
  • watch:{} :监听属性
<template>
  <div>
    姓:<input v-model="firstName">
    名:<input v-model="lastName">
    {{fullName}}{{count}}
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      firstName: "",
      lastName: "",
      count: 0
    };
  },
  computed: {
    //动态计算属性
    fullName: function() {
      //fullName属性通过其它两个属性计算而来,如果两个值都未改变,fullName会使用此前的缓存值,性能比较高
      return this.firstName + "" + this.lastName;
    }
  },
  watch: {
    //检测到数据变化就会回调方法
    fullName: function() {
      this.count++;
    }
  }
};
</script>
4. v-if、v-show、v-for指令
  • v-if:用于条件性地渲染一块内容
  • v-show:用于根据条件展示元素的 指令

v-if和v-show看起来似乎效果相同,但实际v-show只是隐藏了元素,并不会将元素从dom中移除,而v-if会直接将元素从dom中移除。频繁显示隐藏用v-show,频率不高则用v-if。

  • v-for:根据一组数组的选项列表进行渲染。
<template>
  <div>
    <div v-show="show">HelloWorld</div>
    <button @click="handleClick">Click</button>
    <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      show: true,
      list: [1, 2, 3]
    };
  },
  methods: {
    handleClick: function() {
      this.show = !this.show;
    }
  }
};
</script>

结语:还会回来的。

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务