美文网首页
通过vue脚手架搭建vue开发环境

通过vue脚手架搭建vue开发环境

作者: buptzlk | 来源:发表于2019-05-29 16:27 被阅读0次

    以下是个人理解,避免误人子弟,如果有不对的地方,欢迎指正。

    搞清楚几个概念

    什么是node.js?

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
    Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

    安装node.js

    推荐官网下载安装,下载地址:
    http://nodejs.cn/download/

    打开命令行工具:node --version 如果出现版本号,说明已安装。

    什么是npm

    npm 是 JavaScript 世界的包管理工具,并且是 Node.js平台的默认包管理工具。

    安装npm

    我们安装node.js,会默认安装npm;

    国内使用npm比较慢,推荐使用淘宝开发的cnpm,安装方式

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

    cnpm的官网:http://npm.taobao.org/

    什么是vue.js

    vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

    Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    node.js 和 npm的关系

    npm依赖node.js环境,我们使用npm的时候需要安装node.js; 一般安装node.js的时候npm会默认安装,我们页可以通过NVM安装;

    下面是官方文档的原文,解释的更加通俗易懂;

    npm is written in Node.js, so you need to install Node.js in order to use npm. You can install npm via the Node.js website, or by installing a Node Version Manager or NVM. This chapter explains both options.
    
    If you just want to get started exploring npm, using the Node.js installation method is fastest. If you are an advanced developer ready to jump in and work with versions, use the node version manager. If you aren't sure, please read this chapter before you decide. You can always change how you run npm in the future.
    

    node.js 和 vue.js的区别和联系

    node.js不是开发框架,不是一门开发语言,它是一套javascript运行环境。
    vue.js是目前比较流行的前端开发框架。

    我们通过vue.js开发项目通常使用npm做包管理器,npm运行依赖node.js;
    构建一个vue项目的时候,推荐使用npm,这时候我们需要安装node.js。

    创建第一个vue应用

    npm 安装 vue-cli

    npm install --global vue-cli

    通过vue -V 查看版本号

    通过vue-cli脚手架构建vue项目

    • 执行vue init webpack
    • 填写信息逐步确认
    image

    等待命令行执行结束,你的第一个vue项目就构建完成了

    image
    • 执行cnpm run dev 查看效果

    最后会看到Your application is running here: http://localhost:8080
    浏览器中输入http://localhost:8080 看到下面效果表示构建成功了

    image

    相关文章

      网友评论

          本文标题:通过vue脚手架搭建vue开发环境

          本文链接:https://www.haomeiwen.com/subject/syiytctx.html