vue框架搭建方式

首先是需要搭建适合vue的环境

1. node8

2. npm
   淘宝镜像
   > npm install -g cnpm --registry=https://registry.npm.taobao.org
   > npm install jquery --save
   > cnpm install jquery --save

   npm : npmjs.com中央仓库（注册中心）
   cnpm
   	淘宝
   

3. vue-cli
   vue命令行工具安装
   > npm install vue-cli@2.9.6 --global
   > vue --version

环境搭建好之后就是创建vue项目

4. 初始化一个vue工程（一个名为app01的项目）
   > npm init webpack app01
   在出现的选项中从install vue-router开始，都选择no
   本质是在线在线一个vue工程模板，在本地生成一个自定义项目
   命令执行成功后，会在当前目录下产生一个app01目录

5. 安装产品所需要的依赖
   > cd app01
   > npm install

6. 启动程序进行测试
   > npm run dev
   或者> npm run start 也可以

7. 进入测试
   浏览器打开http://localhost:端口号（出现在程序运行成功后）

vue项目工程结构

       app01 	项目名称
	          build 		构建 webpack相关配置
	          config 		配置信息
	          dist 			产品目录，运行npm run build才会出现
	          node_modules 	第三方依赖目录
	          src 				编程目录
		          components 	模块目录，定义子模块
		          main.js 	产品入口文件
		          App.vue 	页面的根组件（模块）
	          index.html	首页
	          packge.json
		          产品信息
		          脚本信息
			          "scripts":{
				          "dev" 		开发
				          "build" 	构建，dist html/css/js/img/font
			          }
		          依赖信息
			          "dependencies" 			产品依赖
			          "devDependencies" 	环境依赖
	          .babelrc
	          .gitignore
		          node_modules
		          dist
		          > git add *
		          > git commit
		          > git push

vue文件

每个.vue的文件都是一个vue组件（模块）
vue文件组成
	1. 模板 (html)
		<template>
			有且只能由一个根标签
			<div>

			</div>
		</template>
	2. JS
		使用模块化编程，为了使别的模块可以调用，要通过export导出Vue构造函数参数，
		用于 new Vue()
		<script>
			export default {

			}
		</script>
	3. css
		<style>
			
		</style>

.vue无法在浏览器上直接执行，vue-loader的作用就是将.vue转换为.html,.css,.js，
然后通过webpack打包再在浏览器上运行