初遇 Vue：简洁与高效的魅力-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84448785/article/details/144379246

文章目录

- 概要
- 内设指令
- 项目化
- vue脚手架项目环境配置
- 使用VueCli快速构建项目
- vue脚手架项目目录说明
- 小结

一、概要

Vue.js 自 2014 年诞生，由尤雨溪受 Angular.js 启发而创建。初期以响应式数据绑定与简洁组件语法崭露头角。2016 年 2.0 版引入虚拟 DOM 提升性能，之后生态逐步完善，vue-router、vuex 等工具及大量 UI 组件库涌现。发展至今，Vue.js 已相当成熟，兼容性佳，Vue 3.0 更是优化诸多特性，在前端领域占据重要地位并持续演进。

vue.js官网：Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/

二、内设指令

Vue.js 提供了丰富的指令，用于在模板中方便地操作 DOM 元素和处理用户事件。例如：

v-if 和 v-else：用于条件渲染，根据表达式的值决定是否渲染某个元素或组件。

vue
<template>
  <div>
    <p v-if="isShow">This paragraph is visible.</p>
    <p v-else>This paragraph is hidden.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    };
  }
};
</script>

v-for：用于循环渲染列表数据。

vue
<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    };
  }
};
</script>

v-bind：用于动态绑定元素的属性。

vue
<template>
  <img v-bind:src="imageUrl" alt="An Image">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

v-on：用于绑定事件监听器。

vue
<template>
  <button v-on:click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
};
</script>

这些指令使得开发者能够在模板中简洁地表达复杂的逻辑，增强了模板的表现力和灵活性。

三、项目化

使用Vue Cli快速构建一个Vue.js项目，这个项目本质就是一套文件结构，里面包含基础的依赖库，只需要npm install 一下就可以安装。

Vue Cli是一个基于Vue.js进行快速开发的完整系统，是一组用于快速原型设计、简化应用程序搭建和进行高效项目管理的工具，开发者可以专注在撰写应用上，而不必花很多时间处理配置的问题。

Vue CLi由三个主要的工具组成，分别是：

1、CLI

CLI是一个npm包，通过Vue.js命令提供核心功能。它可以轻松构建一个新项目，同时，如果你希望通过可视化界面来构建（创建）项目的话，你可以运行vue ui命令行来打开可视化界面。

2、CLI Service

CLI Service是一个开发依赖项，安装在脚手架项目当中，可以帮助开发项目、打包项目和检查项目的一些相关配置。

3、CLI插件

CLI插件也是npm的包，可以为项目提供一些额外的功能，在开发的过程中，可以通过命令行vue add添加CLI插件，比如路由插件(vue-router)、vuex插件等等。

四、vue脚手架项目环境配置

1、下载安装node,下载之后一步步默认安装即可。

下载 | Node.js 中文网https://nodejs.cn/download/

PS：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

2.下载安装VScode代码编辑工具

Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/

3.vue2项目调试插件，下载vue.js_devtools

Vue DevToolshttps://devtools.vuejs.org/

五、使用VueCli快速构建项目

本次采用Vue CLI 3.10版本，Vue CLI从3版本开始，包的名称由vue-cli 改成了vue/cli,如果您已经安装了vue-cli(1.x或者2.x),需要先卸载，再重新全局安装vue/cli。

卸载命令如下：

注意，第一次使用vue脚手架的同学可直接忽略此步骤

npm uninstall vue-cli -g

1、vue cli 脚手架的安装

通过npm全局安装@vue/cli脚手架 @3.10表示下载某个指定版本，如果不写，则下载最新版本

npm install -g @vue/cli

PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

安装淘宝镜像的命令行：

① npm install -g cnpm --registry=https://registry.npmmirror.com

如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

② cnpm install -g @vue/cli

PS：如需要卸载vue/cli包，可执行以下命令行

npm uninstall -g @vue/cli

注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：

npm config set registry https://registry.npm.taobao.orghttps://registry.npm.taobao.org/

或者，哪个方式快，用哪个

npm config set registry registry.npmmirror.comhttps://registry.npmmirror.com/

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。

成功安装界面：

2、vue create 命令创建项目

// helloworld 是项目名，可自行定义

vue create helloworld

执行 vue create 命令之后，可看到如下所示界面

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

此界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，每个配置项的作用如下表所示：

大家根据需求选择相应的配置项，一步步往后创建项目即可。项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：

cd helloword

npm run serve

接下来，在浏览器输入：http://localhost:8080/ 地址，即可看到如下页面

六、vue脚手架项目目录说明

项目创建成功之后，可以看到项目的目录结构如图所示：

目录结构说明如下：

七、小结

Vue.js 作为一款强大而灵活的前端框架，为开发者提供了丰富的工具和技术来构建高质量的 Web 应用。通过深入理解其核心特性，如响应式数据绑定、组件化开发和指令系统，并熟练掌握进阶应用，如 Vue Router、Vuex 和服务端渲染，以及注重性能优化，开发者能够打造出高效、可维护且用户体验出色的前端应用。随着 Vue.js 生态的不断发展和完善，它将在未来的前端开发领域继续发挥重要作用，值得广大开发者深入学习和探索。

初遇 Vue：简洁与高效的魅力

文章目录

概要

内设指令

项目化

vue脚手架项目环境配置

使用VueCli快速构建项目

vue脚手架项目目录说明

小结