vue 学习记录

Vue.js是一套构建用户界面的渐进式框架。建议在安装过程中npm 速度比较慢，可以选择淘宝镜像下载。

安装vue

打开命令窗口：

 npm install vue-cli -g    全局安装vue-cli    脚手架工具，

vue -V    查看下载的版本号

vue init wepack  project-name   这个是项目的名字可以自定义

接下来一些配置，可以默认回车即可；

命令执行完成后，开始进入项目安装并运行：

cd project-name          进入项目

npm install    开始下载

npm run dev  启动端口，在端口8080展示：



这样就完成了vue 的安装搭建。（这里个人对hello.vue的文件做了一些修改）

解析vue.js目录结构



build: 最终发布的代码存放的位置
config： 配置目录，包括端口号等
node_modules：npm 加载的项目依赖模块；这个文件比较大，如果使用webstrom打开的话，建议先不显示。
src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。

static:静态资源目录，如图片、字体等
index.html:首页的入口文件
package.json ： 项目配置文件。
README.md 项目的说明文档，markdown 格式
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持
以.vue形式命名的文件结构由三部分组成如下：

<template>
<!-- 展示模板 -->
</template>
<script>
// 导入组件
export
default {

}
</script>
<style>
/* 样式代码 */
</style>

vue的核心主要是  双向数据绑定和组件化。

参考资料：http://www.runoob.com/vue2/vue-directory-structure.html