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）的更多相关文章

  1. vue.js初学，笔记1，安装

    最近学习vue.js,下面是笔记: 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网:"这 ...

  2. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  3. vue.js初始学习笔记&vue-cli

    笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com ...

  4. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  5. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  6. vue.js应用开发笔记

    看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...

  7. Vue.js 2.x笔记：状态管理Vuex（7）

    1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...

  8. 【vue.js】windows下安装vue.js

    windows下搭建vue开发环境 Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常 ...

  9. Vue.js devtool插件下载安装及后续问题解决

    在中国,你是无法使用谷歌应用商店,所以你下载插件,要使用一些别的手段,一种是下载源码编译,另一种是通过第三方网站.第一种不适合小白,所以现在介绍第二组. 下载插件网站 国外网站:https://www ...

随机推荐

  1. 使用EOLINKER做接口测试最佳路径（上）

    本文内容: 测试脚本管理:讲述如何在 EOLINKER 上设计测试项目目录结构. 编写测试脚本:讲述如何在 EOLINKER 上编写接口测试脚本. 测试脚本执行及报告:讲述如何在 EOLINKER 上 ...

  2. 【面试】足够应付面试的Spring事务源码阅读梳理（建议珍藏）

    Starting from a joke 问:把大象放冰箱里,分几步? 答:三步啊,第一.把冰箱门打开,第二.把大象放进去,第三.把冰箱门带上. 问:实现Spring事务,分几步? 答:三步啊,第一. ...

  3. Git开发分支使用与管理规范

    最稳定的代码放在 master 分支上(相当于 SVN 的 trunk 分支),我们不要直接在 master 分支上提交代码,只能在该分支上进行代码合并操作,例如将其它分支的代码合并到 master ...

  4. Vue + WebApi 小项目：构造自己的在线 Markdown 笔记本应用

    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...

  5. 基础设施DevOps演进之路

    Related Links:Zuul  https://github.com/Netflix/zuulCAT     https://github.com/dianping/cat Apollo  h ...

  6. 多态以及 LeetCode 每日一题

    1 多态 1.1 多态性 Java 引用变量有两个类型:一个是编译时类型,一个是运行时类型.前者是代码中声明这个变量时的类型,后者是由实际对象的类型决定的.当编译类型和运行类型不一样时,产生多态. c ...

  7. 对HTML5标签的认识(四)

    这篇随笔讲讲HTML5中的表单和表单的一些元素 一.表单的作用是什么? 概念:表单在网页中主要是负责对数据信息的采取,表单一共分成三个部分: 1.表单的标签:这里面包含了处理表单的数据所用CGI程序以 ...

  8. OO_BLOG2_多线程电梯模拟

    作业2-1 单部多线程傻瓜调度(FAFS)电梯的模拟 I. 基于度量的程序结构分析 1)程序结构与基本度量统计图 2)分析 ​ 这次作业基本奠定了本人三次电梯作业的基本架构,简述如下: Elevato ...

  9. 编程心法 之 Scrum - Agile 敏捷开发

    Scrum是一种敏捷开发的方法 先定一个能达到的小目标 Scrum 团队 包括产品负责人.开发团队和Scrum Master Product Owner 产品负责人:管理代办事项和优先级的唯一负责人. ...

  10. noi.ac#309 Mas的童年(子集乱搞)

    题意 题目链接 Sol 记\(s_i\)表示前\(i\)个数的前缀异或和,我们每次相当于要找一个\(j\)满足\(0 < j < i\)且\((s_i \oplus s_j) + s_j\ ...