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