vue.js开发环境搭建

待我称王封你为后i 2021-10-13 01:19 439阅读 0赞

环境准备

  • Node.js Javascript的运行时环境
  • npm Node.js下的包管理工具
  • webpack 前端资源模块化管理和打包工具
  • vue-cli 脚手架构建工具
  • cnpm npm的淘宝镜像
    Vue.js安装
  1. Node.js的安装非常容易，首先从官网下载你所需操作系统的版本，然后一直下一步就ok，这里贴个菜鸟教程的传送门。
    安装完成之后，在命令行敲出node -v，如果出现对应版本号，则表示安装成功。
    在这里插入图片描述
  2. npm是随同Node.js一起安装的包管理工具,直接在命令行敲出npm -v就可以查看是否安装成功。
    在这里插入图片描述
    npm包管理器虽然有了，但是由于npm下载需要依赖包的服务器地址在国外，导致很多资源访问会很慢。所以我们可以安装淘宝的国内镜像。

  3. 在命令行敲出 npm install -g cnpm —registry=http://registry.npm.taobao.org。
    这样就可以使用 cnpm 命令来安装模块了：

    cnpm install [name]

  4. 安装webpack

    cnpm install webpack -g

  5. 安装vue脚手架

    npm install vue-cli -g

初始化一个Vue.js环境
在电脑上新建一个文件夹用来存放我们的代码。然后使用命令行进入这个文件夹cd 目录路径。
之后使用命令

  1. vue init webpack name

来初始化一个vue环境，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。在安装过程会有一些初始化的设置，我们可以采用默认配置，一路回车 。
在这里插入图片描述
从上图的我们还可以看到vue很贴心的告诉了我们快速开始(To get started)的命令
安装项目依赖
一定要从官方仓库安装，npm 服务器在国外所以这一步安装速度会很慢。

  1. npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

  1. cnpm install

安装 vue 路由模块vue-router和网络请求模块vue-resource

  1. cnpm install vue-router vue-resource --save

启动项目

  1. npm run dev

运行成功以后他会告诉你ip和端口号
在这里插入图片描述
访问这个地址
在这里插入图片描述
如果出现上图。恭喜你，已经可以开始Vue.js之旅了。

发表评论

表情：
评论列表 （有 0 条评论，439人围观）

还没有评论，来说两句吧...

相关阅读

    相关 搭建开发环境

    搭建开发环境可以分为两种：         第一种是项目非常简单，可能简单到只有一两个页面就可以搞定，这时候我们就直接新建一个html页面进行开发就行         第二

    冷不防冷不防/ 0 赞/ 475 阅读

    相关 搭建开发环境

    devsever contentbase是接下来要执行的本地开发环境的服务器规定服务器要在哪里获取文件 open:true.//自动打开浏览器 port 9000 第一

    朱雀朱雀/ 0 赞/ 471 阅读

    相关 MBlock开发环境搭建

    本人对STM教育有兴趣，研究了一下mblock的代码，总结了一些个人搭建修改的经验，如果有需要进一步了解的朋友，欢迎交流，QQ：690333105，验证信息：mblock

    港控/mmm°港控/mmm°/ 0 赞/ 521 阅读