首页 > 编程知识 正文

Vue环境搭建,vue运行环境搭建详解

时间:2023-05-03 22:18:26 阅读:265340 作者:2072

进行较为复杂的Vue系统开发,最好要使用Vue-cli搭建环境。步骤如下:

安装Node.js,上官网www.nodejs.org,安装LTS版本即可,windows和mac都有相应的安装包

安装完成后在命令行执行 node --version,有结果即表示安装成功

安装node时会自动安装npm,这是node的一个包管理器,以后会经常用到,但是npm访问的服务器在国外,速度很慢,所以我们一般使用taobao的npm镜像。

在命令行输入 npm install -g cnpm --registry=https://registry.npm.taobao.org,完成后就可以用cnpm命令来代替npm。

安装git,访问官网https://git-scm.com/downloads 下载安装,默认设置即可,如果有一个要求选择默认编辑器的地方,可以选择vscode(不选也应该没有影响)

安装Vue-cli,在任意一个你想要放置项目的文件夹上点击右键,选择git bash here进入git的命令行窗口(windows的cmd也可以)

全局安装Vue-cli,输入命令 cnpm install -g vue-cli,安装完成后输入vue --version确认安装正确,当前(2019年6月)Vue的最新版本是2.9.6

创建一个基于webpack的Vue项目,输入命令 vue init webpack my-project (my-project为自定义的项目名称)

输入一些基本信息,一般默认(直接enter)即可,注意Install Vue-router这里选择y,其他问题可以选择n

使 用npm install安装项目依赖的时候,因为网络的原因一般会失败,这个时候可以用ctrl+c强制退出,然后输入cd my-project进入项目文件夹,接着输入cnpm install安装项目的依赖包。正确安装后会发现目录里面多了一个 node_modules 文件夹。

最后一步,输入cnpm run dev运行项目,如果出现防火墙提示,点击允许。当命令行出现http://localhost:8080的字样即可,注意命令行窗口不要关闭。

浏览器访问localhost:8080,打开项目主页,如下图所示表示成功。

 

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。