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. 全文检索-Elasticsearch （四） elasticsearch.net 客户端

    本篇摘自elasticsearch.net search入门使用指南中文版(翻译) 原文:http://edu.dmeiyang.com/book/nestusing.html elasticsear ...

  2. Java8内存模型—永久代(PermGen)和元空间(Metaspace)

    一.JVM 内存模型 根据 JVM 规范,JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部分. 1.虚拟机栈:每个线程有一个私有的栈,随着线程的创建而创建.栈里面存着的是一种叫“栈 ...

  3. SmartSql 快速使用指南

    SmartSql 快速使用指南(https://github.com/Ahoo-Wang/SmartSql) ISmartSqlMapper 常用(部分)接口概述 函数 说明 Execute IDbC ...

  4. Linux下PAM模块学习总结

    在Linux中执行有些程序时,这些程序在执行前首先要对启动它的用户进行认证,符合一定的要求之后才允许执行,例如login, su等.在Linux中进行身份或是状态的验证程序是由PAM来进行的,PAM( ...

  5. springcloud情操陶冶-springcloud config server(一)

    承接前文springcloud情操陶冶-springcloud context(二),本文将在前文基础上浅析下ConfigServer的工作原理 前话 根据前文得知,bootstrapContext引 ...

  6. Java 工厂模式（一）— 工厂方法（Factory Method）模式

    一.工厂方法(Factory Method)模式: 1.什么是工厂方法模式? 工厂方法模式是类的创建型模式,又叫做虚拟构造子模式或者多态工厂模式.它的意义是创建产品对象的工厂接口,将实际创建工作推迟到 ...

  7. element表格添加序号

    表格代码:黄色部分为序号列关键代码上图: <el-table :data="tableData" border height="480" style=&q ...

  8. JavaScript局部变量变量和函数命名提升

    之前接触了一些javascript局部变量命名提升的问题但是一直没有总结今天特地好好总结一下 变量提升 一个变量的作用域是程序源代码中定义的这个变量的区域.全局变量拥有全局作用域,在javascrip ...

  9. jsp内置对象-application对象

    隐含对象application是javax.servlet.ServletContext接口实现类的对象,其拥有application的作用范围,即application可以用于在多个用户之间保存数据 ...

  10. IDEA中的.iml文件和.idea文件夹

    .iml文件 iml文件是IntelliJ IDEA自动创建的模块文件,用于Java应用开发,存储一些模块开发相关的信息,比如一个Java组件,插件组件,Maven组件等等,还可能存储一些模块路径信息 ...