资讯专栏INFORMATION COLUMN

简单搭建基于Webpack +Vue.js的开发环境

刘玉平 / 2400人阅读

摘要:安装环境下载地址安装版本管理器下载到上下载最新版本的安装包,然后按提示安装即可。全局安装命令查看源镜像的命令以上都是镜像地址。镜像地址前面的表示当前使用该地址下包。若修改的位置,输入表示使用该镜像。至此,开发环境搭建完毕。

1、安装node.js 环境

node.js下载地址:https://nodejs.org/dist/v12.4...

2、安装node 版本管理器【NVM】

下载nvm
到github上下载最新版本 https://github.com/coreybutle... 的安装包 nvm-setup.zip ,然后按提示安装即可。

nvm常用命令

nvm install ## 安装指定版本,可模糊安装,如:安装v6.2.0,既可nvm install v6.2.0,又可nvm install 6.2

nvm uninstall ## 删除已安装的指定版本,语法与install类似

nvm use ## 切换使用指定的版本node

nvm ls ## 列出所有安装的版本

nvm ls-remote ## 列出所以远程服务器的版本(官方node version list)

nvm current ## 显示当前的版本

nvm alias ## 给不同的版本号添加别名

nvm unalias ## 删除已定义的别名

nvm reinstall-packages ## 在当前版本node环境下,重新全局安装指定版本号的npm包

查看可安装版本列表

nvm list available

列出本地已安装版本列表:

nvm list

安装node,比如安装 12.3.1 版本的node

nvm install 12.3.1 

使用指定node 版本,比如:

nvm use 10.13.0 
3、安装npm的镜像源管理器(NRM)

npm 的下载包地址: https://registry.npmjs.org/ ,国外的。nrm(npm registry manager )是npm的镜像源管理工具(地址:https://github.com/Pana/nrm),有时候国外资源太慢,那么我们可以用这个来切换镜像源。

全局安装NRM 命令:

npm install -g nrm

查看源镜像的命令:

nrm ls

以上都是镜像地址。镜像地址前面的 表示当前使用该地址下包。若修改 的位置 ,输入: nrm use cnpm (表示使用该镜像) 。

使用源,比如使用国内淘宝的源:

nrm use taobao

测试 npm源的速度命令:

nrm test npm

测试所有源的速度命令:

nrm test

NRM的作用:
只是单纯的提供了几个常用的下载包的地址,并能够让我们在这几个地址间
进行切换,但我们每次装包的时候 使用的装包工具 ,都是 npm 。

4、vue.js 命令行工具 CLI

安装 @vue/cli :(全局)

npm install -g @vue/cli 

若想要使用旧的 vue-li 还要安装 @vue/cli-init :

npm install -g @vue/cli-init

vue-cli 文档:https://github.com/vuejs/vue-...

5、安装 Vue Devtools 调试器

在浏览器上安装 Vue Devtools。它允许你在使用 Vue 时,能够有一个更友好的界面来审查和调试 Vue 应用。

至此,webpack+vue.js 开发环境搭建完毕。

6、创建一个vue 项目demo

打开cmd 命令窗口,进入一个文件夹,敲入以下命令,生成一个vue项目:

vue init webpack demo5

填写相应参数

创建完成后,敲入命令

cd demo5

进入项目文件夹后,敲入命令

npm install

安装相关依赖的包,然后敲入命令执行项目。

npm run dev

在浏览器打开http://localhost:8081

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106366.html

相关文章

  • Vue-项目从本地搭建到线上部署(wǒ shì biaō tí dǎng)

    摘要:放置在目录下或通过绝对路径被引用。对于相关来说,我们推荐使用而不是直接链式指定。在不更改配置文件的情况下,前端页面迭代发布,不需要重启服务。 作者:gauseen 0. 关于 Vuejs 简介:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,易用、灵活、高效。 生态系统 项目 介绍 awesome-vue Vue.js 相关很棒的...

    Arno 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<