1. 环境准备

　　Vue是一套用于构建用户界面的渐进式框架，设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。

　　安装Node.js，下载：https://nodejs.org/

　　查看安装：

$ node -v

　　npm包管理器，集成在node中。

　　查看npm版本：

$ npm -v

　　npm是国外资源，资源网络存在部分限制因素.

　　安装国内镜像cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安装vue-cli脚手架构建工具

2.1 全局安装vue-cli

$ npm install -g vue-cli

　　或：

$ cnpm install -g vue-cli

　　安装vue-cli 3、4：

npm install -g @vue/cli

　　查看安装的vue版本：

vue -V

2.2 使用vue-cli构建项目

　　指定项目目录：

C:\Users\Libing>cd /d F:\Projects

　　构建项目：

F:\Projects>vue init webpack libing.vue

　　安装项目依赖包：

F:\Projects\libing.vue>cnpm install

　　运行项目：

F:\10-Projects\libing.vue>cnpm run dev

　　项目运行成功之后，在浏览器中打开地址查看：http://localhost:8080

　　修改端口号：config/index.js

　　项目打包：打包完成后，会生成 dist 文件夹。项目上线时，只需要将 dist 文件夹放到服务器。

$ npm run build

　　或：

$ cnpm run build

2.3 Vue.js目录结构

目录/文件	说明
build	项目构建（webpack）相关代码
config	配置目录，包括端口号等。
dist	打包目录
node_modules	npm 加载的项目依赖模块
src	开发目录，目录及文件：　　◊ assets：存放图片、Logo等；　　◊ components: 目存放一个组件文件，可以不用。　　◊ App.vue: 项目入口文件，可以直接将组件写这里，而不使用 components 目录。　　◊ main.js：项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
xxxx文件	配置文件，包括语法配置，git配置等。
index.html	首页入口文件，可添加一些 meta 信息或统计代码
package.json	项目配置文件
README.md	项目说明文档，markdown 格式

3. 起步示例

3.1 示例

　　示例1：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>libing.vue</title>

  <script src="node_modules/vue/dist/vue.min.js"></script>

</head>

<body>

  <div id="app">

    <h1>{{ title }}</h1>

    <ul>

      <li v-for="todo in todos" v-bind:key="todo.id">

        {{ todo.text }}

        {{ getTitle() }}

      </li>

    </ul>

  </div>

  <script>

    new Vue({

      el: "#app",

      data: {

        title: "Todo List",

        todos: [{

            id: 1,

            text: "Pending"

          },

          {

            id: 2,

            text: "In Procedure"

          },

          {

            id: 3,

            text: "Done"

          }

        ]

      },

      methods: {

        getTitle: function () {

          return this.title;

        },

        add: function () {

        },

        remove: function () {

        }

      }

    });

  </script>

</body>

</html>

　　示例2：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>libing.vue</title>

  <script src="node_modules/vue/dist/vue.min.js"></script>

</head>

<body>

  <div id="app">

    <h1>{{ title }}</h1>

    <input type="text" v-model="newTodo" v-on:keyup.enter="add">

    <ul>

      <li v-for="(todo,index) in todos">

        {{ todo.text }}

        <button v-on:click="remove(index)">X</button>

      </li>

    </ul>

  </div>

  <script>

    new Vue({

      el: "#app",

      data: {

        title: "Todo List",

        newTodo: "",

        todos: [{

            text: "Pending"

          },

          {

            text: "In Procedure"

          },

          {

            text: "Done"

          }

        ]

      },

      methods: {

        add: function () {

            var text = this.newTodo.trim()

            if (text) {

                this.todos.push({ text: text })

                this.newTodo = ''

            }

        },

        remove: function (index) {

            this.todos.splice(index, 1)

        }

      }

    });

  </script>

</body>

</html>

3.2 说明

　　每个Vue应用都需要通过实例化 Vue 来实现。

var vm = new Vue({

  // 选项

});

　　Vue构造函数参数：

　　　　el：DOM 元素中的 id

　　　　data：定义属性

　　　　methods：定义函数，可以通过 return 来返回函数值。

　　　　{{ }}：输出对象属性和函数返回值

4. Vue生命周期图示

Vue.js 2.x笔记：安装与起步（1）的更多相关文章

vue.js初学，笔记1，安装
最近学习vue.js,下面是笔记: 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网:"这 ...
Vue.js 2.x笔记：路由Vue Router（6）
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
vue.js初始学习笔记&vue-cli
笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com ...
两万字Vue.js基础学习笔记
Vue.js学习笔记目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了首先,我们需要在HTM ...
vue.js应用开发笔记
看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...
Vue.js 2.x笔记：状态管理Vuex（7）
1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...
【vue.js】windows下安装vue.js
windows下搭建vue开发环境 Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常 ...
Vue.js devtool插件下载安装及后续问题解决
在中国,你是无法使用谷歌应用商店,所以你下载插件,要使用一些别的手段,一种是下载源码编译,另一种是通过第三方网站.第一种不适合小白,所以现在介绍第二组. 下载插件网站国外网站:https://www ...

随机推荐

『练手』004 Laura.SqlForever如何扩展导航栏工具栏右键菜单插件
004 Laura.SqlForever如何扩展导航栏工具栏右键菜单插件导航栏插件扩展比如下图的窗口 > 关闭所有文档这个导航栏: 在任何程序集,任何命名空间,任 ...
unity+xlua开发中的问题笔记
转载请标明出处:http://www.cnblogs.com/zblade/ 一.概述整理遇到的一些较难处理的bug,总结相关经验二.主要问题 2.1 material类型的依赖修改对于mate ...
python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍
目录 python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍一丶元祖 1.元祖简介 2.元祖变量的定义 3.元祖变量的常用操作. 4.元祖的遍历 5.元祖的应用场景 p ...
搞懂MySQL InnoDB事务ACID实现原理
前言说到数据库事务,想到的就是要么都做修改,要么都不做.或者是ACID的概念.其实事务的本质就是锁和并发和重做日志的结合体.那么,这一篇主要讲一下InnoDB中的事务到底是如何实现ACID的. 原子 ...
cocos creator主程入门教程（十一）—— 有限状态机和行为树
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 本篇介绍有限状态机和行为树.有限状态机用于有限的状态下的AI,由于同时只能处于一个状态,多个状态需要多个 ...
Java开发笔记（八十四）文件与目录的管理
程序除了处理内存中的数据结构,还要操作磁盘上的各类文件,这里的磁盘是个统称,泛指可以持久保留数据的存储介质,包括但不限于:插在软驱中的软盘.固定在机箱中的硬盘.插在光驱中的光盘.插在USB接口上的U盘 ...
Mybatis入门之动态sql
Mybatis入门之动态sql 通过mybatis提供的各种标签方法实现动态拼接sql. 1.if.where.sql.include标签(条件.sql片段) <sql id="sel ...
Java运行时数据区概述
Java 虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域,这些区域都有各自的用途,如图所示: 程序计数器程序计数器是一块比较小的内存空间,可以看作是当前线程所执行的字节 ...
CSS文本属性文本阴影text-shadow 换行 text-overflow
div{ font-size: 20px; text-shadow: 5px 5px 5px #333; text-shadow: 10px 10px ...
DataPipeline CTO陈肃：从ETL到ELT，AI时代数据集成的问题与解决方案
引言:2018年7月25日,DataPipeline CTO陈肃在第一期公开课上作了题为<从ETL到ELT,AI时代数据集成的问题与解决方案>的分享,本文根据陈肃分享内容整理而成. 大家好 ...

Vue.js 2.x笔记：安装与起步（1）