7步搭建vue项目环境——多图慎点

 

使用vue开发项目的时候首先得搭建一个完整的项目环境。

一、下载node.js

到官方网址去下载安装:https://nodejs.org/en/download/

二、安装node.js

下载完之后,在该安装目录下按住【shift】+鼠标右键然后你就会看到“从此处打开命令窗口”,点击就可以打来命令输入。 输入:node -v

用于检查是否安装成功node.js,返回的是版本号。 输入:npm install -g cnpm --registry=https://registry.npm.taobao.org 是安装国内淘宝npm镜像,因为担心node.js的自带的镜像慢。

三、安装全局vue-cli脚手架

vue-cli脚手架有什么用?为什么要安装。其实vue-cli框架,封装了组件模块等。在项目中直接拿过来用就可以了。

输入命令:cnpm install --global vue-cli

安装好了:

四、创建项目

我在VS Code 里面新建项目然后使用刚刚的方法【shift】+鼠标右键调出“从此处打开命令窗口”然后安装依赖,输入运行似乎行不通。

是我想的太简单了,原来要基于打包工具创建项目,用命令创建项目还会把环境下载到目录下。我是基于webpack,所以 输入命令:

vue init webpack tmall

然后npm就会有一系列问题问你,按照需求,输入yes或者no按回车。然后等待,创建万完项目就会看见一个项目文件夹了。

五、安装依赖

因为在项目中,各个vue模版是相互依赖的,所以要安装依赖。 进入项目中,使用上面的方法,调用出cmd没,然后输入命令。

cnpm install

六、修改项目默认地址

因为在调试项目的时候,很多项目地址的默认端口都是8080,所以我们最好就在运行之前改以下,避免带来不必要的麻烦,以为哪里错了自己吓自己。 在项目的根目录下,有一个config的配置文件目录,打开index.js,修改里面的8080的端口。

七、运行项目

搭建好环境之后,来测试一下是否能够运行。 输入命令:cnpm run dev

然后就开始加载文件了,加载完之后就返回一个地址,就是你刚刚设置过的测试地址。在浏览器中输入地址,Oh yearh~~

可以了。

推荐阅读:

JavaScript数据类型——前端入门

JavaScript对象方法及this用法详解

JavaScript变量作用域及关系简明教程

JavaScript常见操作字符串方法

if…else, if…if…else和if…else if的使用情况

本文为博主原创文章,知识共享,开源精神,转载注明出处。