1、说那四点前,先用 npm 构造项目,并看看目录结构。1.1 用 npm 全局安装 vue 的命令行工具npm install –global vue-cli1.2 创建一个基于 webpack 模板的新项目vue init webpack my-project1.3 进行项目目录,并运行cd my-project; vue run dev1.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 模式2、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 了。