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,即可结束服务。
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
