vue安装并创建运行第一个vue项目(一)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37164847/article/details/80926242

参照:https://www.jianshu.com/p/2769efeaa10a

https://blog.csdn.net/c_royi/article/details/78847609

vue安装:

1.nodejs安装

下载地址:https://nodejs.org/en/download/ 
选择对应版本的下载。然后傻瓜式一步安装到底。比如我的安装后目录为 
E:\Program Files\nodejs 
然后用在cmd 下输入:node -v 查看是否安装成功。 
这里写图片描述 

如果不行就检查一下环境变量中path有没有nodejs的安装路径。如果没有就手动添加。

 

二、查看npm版本 
在cmd下输入命令:npm -v 
这里写图片描述 
如果低于3.0版本需要进行升级(一般nodejs自带的npm的版本都太低,我在第一次运行的时候就被告知版本太低无法运行) 
升级方法: 
在cmd命令下cd到nodejs安装目录,然后输入以下命令:npm update npm 
这里要等待一下。更新完成后再使用:npm -v检查一下版本

三、cnpm的安装 
cnpm是淘宝的一个镜像,安装之后可以使用cnpm安装命令工具,安装速度会加快。 
直接使用npm install -g cnpm –registry=https://registry.npm.taobao.org 
命令安装即可。

四、安装vue-cli 
vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 
安装命令为:cnpm install -g vue-cli,回车,等待安装。 
安装完后,检查是否安装成功,输入vue -v,出现以下版本信息: 
这里写图片描述

五、新建一个Vue项目 

 

我们首先我们要建一个储存webstorm项目的文件夹,我的命名是webstormproject。

进入到这个文件夹,右键,选择Git Bath Here。

输入命令行:npm install vue-cli -g(下载全局vue-cli)

等到下载完成后,输入命令行:vue init webpack myproject  (myproject是项目名,我的项目名就叫myproject)

按照以下设置:

 

选择npm 回车键(enter)开始创建

进入项目,安装并运行:

$ cd demo
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

注意:Vue.js 不支持 IE8 及其以下 IE 版本。

 

展开阅读全文

没有更多推荐了,返回首页