美文网首页
第二十一讲 vue环境搭建以及入门

第二十一讲 vue环境搭建以及入门

作者: w_yong | 来源:发表于2021-12-29 13:02 被阅读0次
    本章主要介绍vue的开发环境搭建以及vue项目的创建

    (vue我也只会照葫芦画瓢,不是太会,所以这一方面你自己看一些资料吧)

    一、node.js安装

    1、Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js。node.js的官方地址为:https://nodejs.org/en/download/,下载相应版本(64位)。

    1.png

    2、安装完毕之后,在cmd命令行下验证是否安装成功:输入npm,显示如下就表示安装成功。


    image.png
    二、cnpm的安装

    安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,下载速度是超级慢。我们可以安装cnpm,cnpm是淘宝对npm的镜像服务器,这样依赖的包安装起来就快多了。
    安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org

    三、vue-cli的安装

    vue-cli是vue官方提供的一个命令行工具,可用于快速搭建应用框架。
    安装命令为:cnpm install -g vue-cli,回车,安装。
    安装完后,检查是否安装成功,输入vue,出现以下提示表示安装成功。


    image.png
    四、新建一个Vue项目

    1、新建一个项目文件夹,命名为 vue-demo,cd到此文件夹,输入:vue init webpack vue-demo,回车,按照如下操作进行初始化(默认按回车即可,碰到YES/NO,按照如下图输入Y或者N即可)

    image.png
    2、初始化完成之后,会有如下提示,表示无问题。并且告诉了我们如何运行当前项目:npm run dev

    3、cd到vue-demo 文件夹,执行cnpm install,安装依赖包,安装完成之后,项目目录下多了node_modules
    4、运行项目:npm run dev
    命令行中出现以下提示,表示运行成功

    5、浏览器中访问:http://localhost:8080/

    相关文章

      网友评论

          本文标题:第二十一讲 vue环境搭建以及入门

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