Vue.js的安装与介绍

来源：互联网发布：自学武术软件编辑：程序博客网时间：2024/06/05 20:19

最近开始学习Vue.js，才发现自己还有好多东西不懂，所以在这里记录一些遇到的问题。

1. 安装Vue.js

完整的教程参考 Vue官方文档——安装

这里讲一些官方文档没提到的东西。

命令行工具 (CLI) 安装

通过命令行工具 (CLI) 安装的话文档里只介绍了一种，即安装的是webpack模板。webpack等我研究研究再写一篇。

在官方的githbu上有给出其他几个模板 github.com/vuejs/vue-cli

这里就要说一下 vue-cli 了

vue-cli 在全局安装后的命令是 vue，它支持以下两个命令

vue init <template-name><project-name>

vue list

init命令用来基于指定模板生成项目结构。template-name为模板名，project-name为项目名。

list命令用来列出所以可用的模板。

2.在项目中使用

官方文档讲了vue的各种用法，却没有将如何具体的应用到项目中，网上的也大都是官方那个cli的运行教程。很强

Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

从官方说明中我们可以知道，使用vue有两种形式，一种是当做前端框架来增强前端，另一种是构建单页应用。

只做为前端框架

这种方法即只是利用vue的特性来增强前端的功能。整体的页面生成，路由等功能仍由后端实现。

如在一个html中：

<!DOCTYPE html><html><HEAD>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </HEAD> <div id="app">     {{ message }} </div> <script src="https://unpkg.com/vue"></script> <script>     var app = new Vue({         el: '#app',         data: {             message: 'Hello Vue!'         }     }) </script> </BODY> </html>

如果需要使用vue的某些特性如双向绑定等，且只有一个界面需要时可使用这种方法。

构建单页应用

可以按照官方的安装webpack模板的版本或其他版本

如果是webpack版本文件结构是这个样子：

7.16-4

关于vue在单页项目的具体应用会在其他文章中详细介绍。

感觉在不知不觉中挖下了好多坑。。。

阅读全文

0 0