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:

在标签下，输入,src存放之前存放vue.js的文件目录

具体实例如下：

    
    
    






    {{msg}}

启动server：

在控制台命令下输入live-server

则网页打开，显示

在控制台下输入ctrc+c,即可结束服务。