vue学习笔记(二)——简单的介绍以及安装

时间:2022-09-03 15:51:24

学习编程需要的是 API+不断地练习^_^

Vue官网:https://cn.vuejs.org/

菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html

1.简单的介绍

  Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

  Vue 只关注视图层, 采用自底向上增量开发的设计。

  Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

  Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试。

  Vue当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

2.Vue的安装

  1.独立版本:直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

2.NPM: 在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。

   Vue.js 也提供配套工具来开发单文件组件

     由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像

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

   #从此以后 cnpm同npm一样使用

   npm 版本需要大于 3.0,如果低于此版本需要升级它:

      # 查看版本       

      $ npm -v       

      2.3.0       

      #升级 npm       

      cnpm install npm -g

      在用 Vue.js 构建大型应用时推荐使用 NPM 安装:

      # 最新稳定版
      

      $ cnpm install vue

   3.命令行工具: 

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。

    # 全局安装 vue-cli
    $ cnpm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 这里需要进行一些配置,默认回车即可
    This will install Vue 2.x version of the template.     For Vue 1.x use: vue init webpack#1.0 my-project     ? Project name my-project
    ? Project description A Vue.js project
    ? Author runoob <test@runoob.com>
    ? Vue build standalone
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Setup unit tests with Karma + Mocha? Yes
    ? Setup e2e tests with Nightwatch? Yes   vue-cli · Generated "my-project".   To get started:   cd my-project
  npm install
  npm run dev   Documentation can be found at https://vuejs-templates.github.io/webpack  
    进入项目,安装并运行:
    $ cd my-project
    $ cnpm install
    $ cnpm run dev
    DONE Compiled successfully in 4388ms     > Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

vue学习笔记(二)——简单的介绍以及安装

注意:Vue.js 不支持 IE8 及其以下 IE 版本。