Vue.js学习笔记(一) : 开发环境搭建

    1. 前言

        Vue.js是目前流行的前端框架,官网地址:https://cn.vuejs.org/。它可以类似jQuery引入包直接撸,也可以用node来构建工程项目。它在官网上的介绍是:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。最大的特点是:数据驱动视图!

    2. Vue.js开发环境搭建

    2.1 直接引入使用


    2.2 搭建本地开发环境

    2.2.1 下载node.js,官网http://nodejs.cn/下载安装包并安装。

    Vue.js学习笔记(一) : 开发环境搭建_第1张图片

  2.2.2 cmd下查看安装是否成功

    Vue.js学习笔记(一) : 开发环境搭建_第2张图片

  2.2.3 安装webpack和vue-cli脚手架

       npm install webpack -g

npm install vue-cli -g

        如果使用npm安装慢,可以安装镜像cnpm再继续:

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

     2.2.4 创建Vue测试项目

    Vue.js学习笔记(一) : 开发环境搭建_第3张图片

然后在cmd里 cd test-vue 、 npm run dev

    Vue.js学习笔记(一) : 开发环境搭建_第4张图片

    Vue.js学习笔记(一) : 开发环境搭建_第5张图片

2.2.5 打开浏览器在地址栏输入http://localhost:8080,看见下图首页环境搭建成功。

Vue.js学习笔记(一) : 开发环境搭建_第6张图片


你可能感兴趣的:(vue.js)