第1节：走进Vue
程序员文章站
2022-06-16 17:26:25
...
目录
1、下载Vue2.0的两个版本（cn. vuejs.org）
2、项目结构搭建
3、编写第一个HelloWorld代码：
1、下载Vue2.0的两个版本（cn. vuejs.org）
- 开发版本：包含完整的警告和调试模式
- 生产版本：删除了警告，进行了压缩
2、项目结构搭建
2.1、 搭建项目文件结构如下图所示
新建assets文件夹,并在文件夹下新建css文件夹，js文件夹(将下载下来的vue.js文件和vue.min.js文件放到此文件夹下)；
新建example文件夹，后续需要学习的测试页面将放到该目录下;
新建index.html文件；
并编写index.html文件代码如下：
<!DOCTYPE html>
<html lang="en">
<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">
<title>Vue.js实例</title>
</head>
<body>
<h1>Vue2.0实例</h1>
<hr>
<ol>
<li><a href="#">hello world实例</a></li>
</ol>
</body>
</html>2.2、live-server使用:用npm进行全局安装
在visual studio code中终端处输入如下命令：
|
2.3、在项目的目录中打开
在终端输入如下命令，弹出一个浏览器窗口如图所示（代表着开启了一个服务）
|
2.4、初始化项目
在终端输入以下命令，初始化项目，同时在项目中生成一个package.json文件
|
3、编写第一个HelloWorld代码：
- 在example目录下新建helloword.html文件，编写代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>HelloWorld</title>
<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 type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>helloworld</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:'hello world!'
}
})
</script>
</body>
</html>
- 修改index.html文件代码如下
<ol>
<li><a href="./example/helloworld.html">hello world实例</a></li>
</ol>- 控制台命令运行，
弹出浏览器窗口
点击hello world实例即是访问到我们的helloword.html文件，结果如图所示
上一篇： 第1节-深入理解Tomcat