一、说那四点前,先用 npm 构造项目,并看看目录结构。html
1.1 用 npm 全局安装 vue 的命令行工具 npm install --global vue-cli 1.2 建立一个基于 webpack 模板的新项目 vue init webpack my-project 1.3 进行项目目录,并运行 cd my-project; vue run dev 1.4 目录结构 | | - build : 项目构建(webpack)相关代码 | - config : 配置目录,能够在 index.js 文件中修改端口号 | - node_modules : npm 依赖模块 | - src : 要开发的目录,要作的事情基本都在这个目录里。包含: | - - assets : 放图片 | - - components : 组件文件 | - - App.vue : 项目入口文件 | - - main.js : 项目的核心文件 | - static : 静态资源目录,如图片、字体 | - .xxxx 文件 : 配置文件、包括语法配置,git 配置等 | - index.html : 首页入口文件 | - package.json : 项目配置文件 | - README.md : 项目说明文档,markdown 模式
二、Vue 起步vue
2.1 Vue 实例 var vue = new Vue({ var data = {msg: 'This is data'}; el: '#app', data:data, methods:{ details: function(){ return "This is a method" } } document.write(vue.$data === data); // true }); 2.2 使用特色 2.2.1 内容格式为 Json 格式; 2.2.2 Vue 实例三部分构成 第一部分:绑定元素字段 el: el: '选择器' 第二部分:定义属性模块 data:{ name: value } 第三部分:定义方法模块 methods: methods:{ // 变量函数 方法名: 方法体 } 2.2.3 {{}} 用来标识要使用的变量或者方法 2.2.4 能够经过变量来,访问 Vue 实例中的成员,须要用 $ 符号声明 vue.$el
掌握这四个特色,就入门 Vue 了。node