1.VUE 安装以及vue.js下的第一个hello world
1.进入官方网站下载最新的vue.js
官方网站有两个文件可供选择:
- 开发者版本(vue.js):包完整的警告和调试模式
- 发布版本(vue.min.js):删除了警告,进行了压缩
网址:https://cn.vuejs.org/v2/guide/installation.html
2.项目结构搭建
本项目用的集成开发工具为Visual Studio Code,也可选择其他开发工具,选择vs code的原因是因为工具直接具有终端输入功能。
- 创建项目文件夹(eg:VUE)
- 在工程下创建assets文件夹,将两个版本的vue.js拷贝进js子文件夹。如下图
- 创建工作目录example
- 创建index.html(启动页面)
至此安装目录已经建完,如下图:
说明:assets文件夹在linux和unix环境下是不编译的。
3.安装启动服务
目录建完之后,需要安装 启动服务。
安装启动服务的前提是已经安装了node.js,有关node.js的详细安装请查看菜鸟教程的node.js的安装教程,网址http://www.runoob.com/nodejs/nodejs-install-setup.html
安装启动服务命令:cnpm install -g live-server
初始化前端项目:npm init --------------------------------------(进入配置项目阶段)
name:(Vue):输入你想要的项目名,项目名必须为小写字母开头
version:(1.0.0):输入要定义的版本号
description:输入项目描述
entry point:(index.html):输入入口文件
test command:
git repository:输入Git仓库地址
keywords:输入项目关键词
author:输入作者名
is this ok?(yes):回车结束
至此配置完成,在项目中生成package.json文件,方便以后进行包的管理
4.项目中引入vue
index.html:
在<head>标签下,输入<script></script>,src存放之前存放vue.js的文件目录
具体实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js实例</title>
<script type="text/javascript" src="assets/js/vue.js"></script>
</head>
<body>
<div id='ele'>
{{msg}}
</div>
<script>
new Vue({
el:'#ele',
data:{
msg:"hello vue.js"
}
})
</script>
</body>
</html>
启动server:
在控制台命令下输入live-server
则网页打开,显示
在控制台下输入ctrc+c,即可结束服务。