Vue.js Tutorial column introduces learning planning and understanding Vue.js, you can learn together.
This study note will record some of the program codes and learning experiences I personally wrote when learning the Vue.js framework. To do this, I will create a directory named vuejs under the ProgrammingLanguage/JavaScript directory, and set up the following two subdirectories under this directory:
directory is used to store notes in markdown format. The
directory is used to store the program code recorded in the notes.
<script> tag of the HTML document, like this:
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 或者 --> <!-- 生产环境版本，优化了文件大小和载入速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
cdn.jsdelivr.net to reference the Vue.js framework, this is also the service recommended in the Vue.js official tutorial. As for whether to reference the version of the development environment or the version of the production environment, it depends on the specific usage scenario. Under normal circumstances, I would choose to use the development environment version with relatively rich feedback information during the program development stage, and wait until the program is released before switching to the production environment version that pursues more execution efficiency. Let’s take a look at the advantages of using CDN as a reference method:
当然了，这种引用方式归根结底都得依赖于网络环境，甚至很多时候是国外的网络环境，由于众所周知的原因，我们的网络环境经常会受到各种不可抗力的影响，所以我个人更倾向于将框架文件下载到本地来引用。
正如上面所说，如果想减少意外状况，最好的选择是将 Vue.js 的框架文件下载到本地，然后再引用它们。下载这类文件的方式有很多，现如今为了便于更新版本，人们通常会选择使用 npm 这类包管理器来下载 JavaScript 的各种程序库和应用框架。具体做法就是在之前创建的code目录下执行以下命令：
npm install vue --save # 如果需要相应的权限，可以使用 sudo 命令来提权
如果安装过程一切顺利，接下来就只需要在 HTML 文档的<script>标签中引用框架文件的路径即可，像这样：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="node_modules/vue/dist/vue.js"></script> <!-- 或者 --> <!-- 生产环境版本，优化了文件大小和载入速度 --> <script src="node_modules/vue/dist/vue.min.js"></script>
在这里，选择开发环境版本还是生产环境版本的依据是一样的，就不再重复了。下面来验证一下框架文件是否被成功引入。
我将通过编写一个"Hello World"程序来验证 Vue.js 框架是否已被成功引入，具体步骤如下：
在code目录下创建一个名为01_sayHello的项目目录，并在该目录下设置以下两个子目录：
img目录：用于存放图片资源。js目录：用于存放自定义 JavaScript 脚本文件。将名为logo.png的图表文件存储到code/01_sayHello/img目录中。
在code/01_sayHello目录中创建一个名为index.htm的 HTML 文档，并在其中输入如下代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
<script defer="defer" src="js/main.js"></script>
<title>你好，Vue.js</title>
</head>
<body>
<p id="app">
<h1> {{ sayHello }} </h1>
<img :src="vueLogo" style="width:200px">
</p>
</body>
</html>在code/01_sayHello/js目录中创建一个名为main.js的 JavaScript 脚本文档，并在其中输入如下代码：
// 程序名称： sayHello
// 实现目标：
// 1. 验证 Vue.js 执行环境
// 2. 体验构建 Vue.js 程序的基本步骤
const app = new Vue({
el: '#app',
data:{
sayHello: '你好，Vue.js！',
vueLogo: 'img/logo.png'
}
});接下来只需将相关的 Web 服务运行起来（该服务器可以是 Apache 或者 Nginx，也可以是 VSCode 的 Live Sever 插件），然后如果在 Web 浏览器中看到如下页面，就说明 Vue.js 框架已经被引入到了程序中，并被成功执行起来了。
更多相关免费学习推荐：js视频教程
The above is the detailed content of Vue.js learning record one: learning planning and understanding Vue.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
