Vue安装并运行简易项目

发布时间:2019-10-10 20:46:05 浏览量:1199 标签: Vue 项目

安装Vue并使用Vue搭建简单的项目:首先说一下npm,NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 1、允许用户从NPM服务器下载别人编写的第三方包到本地使用。

  • 2、允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

  • 3、允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。


1570711489953315.jpg


由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功。


一、下载nodejs


下载地址:https://nodejs.org/en/,我们选择10.16.3LTS长期维护版本。点击下载即可,待下载完成,双击运行,默认配置点击下一步至安装完成;


二、查看npm版本


命令:

npm -v


如下图:当前版本为6.9.0版本,表示安装成功。

image.png


三、使用npm安装vue-cli

命令:

npm install --global vue-cli


注释:cnpm为国内镜像,个人建议使用npm安装。


四、创建项目(创建一个基于 webpack 模板的新项目)


命令:

vue init webpack my-project


五、项目配置

    提示:默认回车即可

个人配置如下:

image.png


六、进入项目安装并运行

命令:

 cd my-project
 npm install
 npm run dev

提示:此过程较慢。


七、安装完成

image.png


八、校验项目

浏览器访问网址,查看打开情况

1570711451706042.png



评论
登录后才可以进行评论哦! QQ登录
验证码
评论内容