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 ...

随机推荐

C++STL之Vector向量详解,用法和例子一起学习一起加油
C++ STL之vector用法总结 1 ...
Spring Boot(四)：Thymeleaf 使用详解
在上篇文章Spring Boot (二):Web 综合开发中简单介绍了一下 Thymeleaf,这篇文章将更加全面详细的介绍 Thymeleaf 的使用.Thymeleaf 是新一代的模板引擎,在 S ...
Spring Boot使用Spring Data Jpa对MySQL数据库进行CRUD操作
只需两步!Eclipse+Maven快速构建第一个Spring Boot项目构建了第一个Spring Boot项目. Spring Boot连接MySQL数据库连接了MySQL数据库. 本文在之前 ...
Linux磁盘管理及LVM讲解（week2_day2）--技术流ken
硬盘接口从整体的角度上,硬盘接口分为IDE.SATA.SCSI和SAS四种,IDE接口硬盘多用于家用产品中,也部分应用于服务器,SCSI接口的硬盘则主要应用于服务器市场,而SAS只在高端服务器上,价 ...
C#列表页面
前台页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx ...
Web后端 JAVA实现验证码生成与验证功能
首先,写一个验证码生成帮助类,用来绘制随机字母: <span style="font-size:14px;">import java.awt.Color; impor ...
Nano Server速记
入门参考https://docs.microsoft.com/zh-cn/windows-server/get-started/nano-server-quick-start 1.创建VHD Impo ...
从0开始的Python学习019更多的Python内容2
书接上文,接演Python全传话说学了这么多Python的基础知识,也该写一点让别人看不懂的代码了. lambda lambda表达式,是一个方法的简化形似,它没有自己的代码块,它后面的语句就是它的 ...
JDBC获取数据库连接
是什么? JDBC:Java Data Base Connectivity(java数据库连接) 为什么用? sun公司提供JDBC API接口,数据库厂商来提供实现我们需要用哪个数据库就加载那个数 ...
SQL Server数据仓库的基础架构规划
问题 SQL Server数据仓库具有自己的特征和行为属性,有别去其他.从这个意义上说,数据仓库基础架构规划需要与标准SQL Server OLTP数据库系统的规划不同.在本文中,我们将介绍在计划数据 ...

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