博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
搭建 vue项目环境
阅读量:5014 次
发布时间:2019-06-12

本文共 1157 字,大约阅读时间需要 3 分钟。

1.前期准备:

(1)检测电脑是否安装node.js

  依次:开始-搜索cmd-回车(或者用快捷键:Windows+R),然后在命令行输入node -v,按下回车键;

  如果出现“'node' 不是内部或外部命令,也不是可运行的程序”,说明没有安装node.js;

  如果本机没有安装node运行环境或者node版本过低,请下载node 安装包进行安装或者更新至最新的node版本;

       下载地址:https://nodejs.org/en/download/

(2) 检测node.js是否安装成功

  依次:开始-搜索cmd-回车(或者用快捷键:Windows+R),然后在命令行输入node -v,按下回车键;

  如果输出版本号,说明我们安装node 环境成功:

  

   由于新版的nodejs已经集成了npm,所以npm也一并安装好了,我们可以使用npm -v查看 npm 的 版本号:

  

 (3)Tips:淘宝镜像

  因为访问外网会很慢,所以有需要的话可以使用淘宝镜像():

  打开命令终端,输入: npm install -g cnpm --registry=

  回车之后,就可以用 cnpm 替代 npm了,下载速度会更快。

2.搭建 vue项目环境

(1)安装vue-cli脚手架

  脚手架:快速搭建开发环境

  在cmd输入:npm install vue-cli -g,进行全局安装

  

  验证是否安装成功:输入vue,出现vue信息,说明安装成功

  

(2)创建新项目

  新建一个项目文件夹(我选择了F盘,在nuonuo-D文件夹中新建了一个名为vue-test的文件夹):

  > 进入项目文件夹,在如下图所示位置输入cmd,并回车:

  

  即可在该目录下打开cmd;

  > 输入vue init webpack .       (注:“.” 代表创建到当前项目下)

  

  

(3)安装依赖包

  进入项目文件夹:cd vue-test,回车进入项目文件夹:

  输入: npm install (或者简写为:npm i)安装依赖包;

  完成之后,得到如下目录结构:

  

  

(4)运行项目

  打开webstorm,通过“磁盘名:”进入项目文件所在的磁盘(如F:),通过“ cd  文件名”最终进入项目文件夹

  输入npm start(或者npm run dev)运行项目

  

  在浏览里输入:localhost:8080(默认端口为8080,如果已被占用,会自动往上叠加(如8081))

  

  浏览器显示如下页面,则vue项目搭建成功!

 

 

 

 

 

 

转载于:https://www.cnblogs.com/nuonuo-D/p/9959311.html

你可能感兴趣的文章
COM组件开发实践
查看>>
yii2 源码分析1从入口开始
查看>>
浅谈网站推广
查看>>
Away3D基础之摄像机
查看>>
Leetcode 128. Longest Consecutive Sequence
查看>>
程序员必须知道的几个Git代码托管平台
查看>>
导电塑料入梦来
查看>>
C# 线程手册 第五章 扩展多线程应用程序 - 什么是线程池
查看>>
笔记1126ASP.NET面试题(转)
查看>>
考研路茫茫--单词情结 - HDU 2243(AC自动机+矩阵乘法)
查看>>
HTTP运行期与页面执行模型
查看>>
tableView优化方案
查看>>
近期思考(2019.07.20)
查看>>
Apache2.4使用require指令进行访问控制
查看>>
冗余关系_并查集
查看>>
做最好的自己(Be Your Personal Best)
查看>>
如何搭建github+hexo博客-转
查看>>
HW2.2
查看>>
将Windows Server 2016 打造成工作站(20161030更新)
查看>>
5大主浏览器css3和html5兼容性大比拼
查看>>