从零开始搭建Vue开发环境

本文将详细介绍如何零开始进行Vue开发环境搭建。

1.安装nodejs

去node.js官网(https://nodejs.org/en/)下载安装文件,并进行安装。
可使用node -vnpm -v来检查是否安装成功。

注意:选择安装路径时最好选择C盘的路径,否则安装完成后在git bash中使用node -v会报找不到node命令的错误,需要手动的将node安装路径添加到用户变量path中,之后安装其它全局命令时也需要这样操作,而安装在C盘路径则在安装完后可以直接在git bash中使用。

2.安装cnpm

这里安装cnpm是因为使用npm install安装包时速度很慢,所以建议安装cnpm后使用cnpm install来安装包。
使用下以下命令来进行安装:

npm install -g cnpm --registry=https://registry.npm.taobao.org

同样可以使用cnpm -v来检查是否安装成功。

3.安装vue-cli

vue-cli是Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
使用下列命令进行安装:

cnpm install -g vue-cli

如果不想直接安装vue-cli只需要vue环境的话,要以使用cnpm install -g vue来进行安装。

4.使用vue-cli创建项目

安装 好vue-cli之后就可以根据模板来生成自己的项目了,官方提供了两种模板,分别为webpack-simple和webpack,这里来使用webpack模板来创建一个my-project项目。

vue init webpack my-project


执行完上述命令之后,当前目录下会生成一个名为my-project的目录,打开可以看到其中已经生成了一些vue的文件夹以及项目代码。

在项目目录下执行下列命令运行项目:

cnpm install
npm run dev

浏览器中会自动打开一个页面,显示如下:

若未自动打开页面,可根据npm run dev之后命令行输出的信息,在浏览器中输入相应地址进行访问,一般为http://localhost:8080,但如果8080端口被占用,则端口会发生变化。

以上就完成了Vue开发环境的搭建,生成了一个最基本的项目,之后可以在此项目之上进行开发。

交流QQ群:255489119

猜你喜欢

转载自blog.csdn.net/FormulaRoom/article/details/72598818