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. 图像检索(5):基于OpenCV实现小型的图像数据库检索

    本文对前面的几篇文章进行个总结,实现一个小型的图像检索应用. 一个小型的图像检索应用可以分为两部分: train,构建图像集的特征数据库. retrieval,检索,给定图像,从图像库中返回最类似的图 ...

  2. 【大数据安全】基于Kerberos的大数据安全验证方案

    1.背景 互联网从来就不是一个安全的地方.很多时候我们过分依赖防火墙来解决安全的问题,不幸的是,防火墙是假设"坏人"是来自外部的,而真正具有破坏性的攻击事件都是往往都是来自于内部的 ...

  3. docker run 之后执行多条命令

    执行 ls docker run microsoft/dotnet ls && cd /root 执行 多条使用sh -c命令 在run后面加了一个sh -c命令,后面直接加多条语句即 ...

  4. C#之使类型参数--泛型

    1.泛型是什么 泛型的就是“通用类型”,它可以代替任何的数据类型,使类型参数化,从而达到只实现一个方法就可以操作多种数据类型的目的. 2.为什么使用泛型 举一个比较两个数大小的例子: 以上例子实现in ...

  5. C# 创建、更改Excel命名区域（NamedRange）

    创建命名区域是指给选定的某个单元格或多个单元格区域设置名称,目的是方便我们在文件中的其他地方对该单元格区域进行引用能够简化公式引用或者方便数据管理.下面记录了具体的C#示例代码.这里创建命名区域分为了 ...

  6. 回顾曾经的自己,献给java初学者的建议

    要不惜代价投资自己,任何对自己的投资都是值得的 要多学习数据结构, 习惯看源码! 一份知识经过n个人的传递早已经不成样子了 遇到问题不要直接百度,百度上那些花里胡哨的东西有用的很少,对症下药才是王道, ...

  7. mac webstorm无法打开 如何使webstorm不卡

    场景:在应用程序里删除了原先的webstorm,然后从官网下载了新的安装包,进行安装.安装后,webstorm就再也打不开了. 解决方案:执行以下命令,清楚webstorm所有缓存,然后重新安装 $ ...

  8. div在另一个div居中对齐

    position:fixed; top:0; right:0; left:0; bottom:0; margin:auto;

  9. APP网站安全漏洞检测服务的详细介绍

    01)概述: 关于APP漏洞检测,分为两个层面的安全检测,包括手机应用层,以及APP代码层,与网站的漏洞检测基本上差不多,目前越来越多的手机应用都存在着漏洞,关于如何对APP进行漏洞检测,我们详细的介 ...

  10. （五） Keras Adam优化器以及CNN应用于手写识别

    视频学习来源 https://www.bilibili.com/video/av40787141?from=search&seid=17003307842787199553 笔记 Adam,常 ...