码迷,mamicode.com
首页 > 其他好文 > 详细

vue前端项目开发环境搭建并用npm方式运行

时间:2020-03-06 19:08:40      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:回车   oba   registry   地址栏   comm   功能   down   进入   nod   

1.下载node.js

http://nodejs.cn/download/

推荐下载 .mis安装包,下一步下一步...

 技术图片

 

安装完后,通过cmd控制台输入node -v  弹出版本号即成功

 技术图片

2.通过node.js中内置的npm(包/依赖)插件来下载其他开发所需的环境

  注意:如设置了代理限制,可通过cmd控制台输入npm config set proxy=http://代理服务器地址:8080 设置代理(网络有代理限制时下载不到依赖包时,按需设置)

  npm config delete proxy  为取消代理模式

  技术图片

  npm默认寻找国外服务器下载依赖包,可以通过cmd控制台输入npm config set registry=https://registry.npm.taobao.org 设置过内淘宝镜像,下载依赖包时速度会更快

  技术图片

用npm下载webpack

  通过cmd控制台输入npm install webpack -g 就会进行下载并安装到本机,此时不要关闭cmd窗口

   技术图片  下载安装中

 

 

  技术图片  安装成功,之前安装过所以提示略有不同

 

 

用npm下载vue-cli

   通过cmd控制台输入npm install --global vue-cli 就会进行下载并安装到本机,此时不要关闭cmd窗口

   技术图片  下载安装中

 

 

   技术图片  安装成功,之前安装过所以提示略有不同

 

 

 

3.使用vue-cli创建vue前端项目

  win7下,可以进入到项目的目标文件夹,然后在地址栏输入cmd回车,弹出cmd控制台,xp要在cmd控制台中cd过去文件夹中

 

  技术图片

  技术图片

 

 

 

   在弹出cmd控制台中输入vue init webpack vuetest  其中vuetest是各位项目的名称

    此时会询问需要安装那些功能,我除了下面两个test功能是NO外,其他保持回车默认配置

 

     技术图片

 

    可以看到已经多了一个文件夹,里面装了默认的vue项目

 

     技术图片

 

 

   点击进入新建的文件夹,再在地址栏输入cmd打开控制台,输入npm install下载安装项目所需依赖(当下载别人的项目下来时也需要进项目文件夹内执行npm install 因为打包发布环境与开发环境包大小和数量有所不同)

    技术图片  下载安装中

     技术图片  安装成功,之前安装过所以提示略有不同

 

 

3.启动项目

   在项目处执行npm run dev,前提是已经通过npm install安装过包依赖的项目,否则可能启动不成功

    技术图片  运行中

     技术图片  运行完毕

 

  打开浏览器,输入刚刚cmd返回的url地址http://localhost:8080

    显示出此界面,则成功运行项目

    技术图片

 

 

 

 

 

 

 

 

 

vue前端项目开发环境搭建并用npm方式运行

标签:回车   oba   registry   地址栏   comm   功能   down   进入   nod   

原文地址:https://www.cnblogs.com/FTAH/p/12427997.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!