Node的下载与安装

工欲善其事必先利其器,在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现。

1、首先我们进入到node的官网 https://nodejs.org/zh-cn/ 下载node

运行安装node-—选择文件安装路径-—之后一直点next就可以了

 

2、安装淘宝cnpm镜像

安装好node之后,我们打开终端,输入node -v 查看node的版本,如果能够成功查询到,就表示安装成功了。

因为node中包括了npm,所以可以查看npm的版本

在国内使用npm是非常慢的,所以我推荐使用淘宝npm镜像,使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具,安装cnpm需要npm,打开终端窗口,输入

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

然后回车,如下图所示

安装完成之后,我们输入cnpm -v 来确定是否安装成功,由图可以看出,系统不识别这个cnpm命令

 

这个时候我们来到node安装的文件位置,找到node_global全局模块的文件夹,可以看到cnpm实际上安装在nodel_modules文件夹中,但是cnpm.cmd却是在node_global文件夹中,我们只需要将这个cnpm.cmd文件所在文件夹路径添加到PATH系统变量中去即可,如图所示:

添加文件路径到PATH中去

 

再次打开cmd窗口,输入cnpm -v ,能够成功显示,表示安装淘宝cnpm成功了。

 

3、安装vue-cli脚手架

打开终端 , 全局安装vue-cli

输入指令cnpm install --global vue-cli 

安装好vue-cli之后,再输入vue 来查看vue-cli是否安装成功,出来vue的信息,及说明安装成功

 

4、搭建完vue-cli之后,我们开始创建一个新项目,我们尽量不要安装在c盘,

      因为vue下载下来的文件比较大,更换到其他盘里。

我们开始创建一个新的项目,输入命令: vue init webpack my_project

项目的名称   my_vue

项目的描述   默认

作者

如何构建项目(选第一个)

是否安装vue-router(路由)  根据项目来(新学者选 n )

是否使用ESLint来规范我们的代码? Y

选用标准的语法检测(第一个)

是否需要自动化测试? N   N

项目中采用是什么形式安装? Npm

之后自动安装项目所依赖的包

接着我们进入到我们安装项目的文件目录中,能够发现我们创建好的项目。

 

接着来到终端中,进入到我们的项目文件中输入 cd my_project,之后安装各个模板之间的依赖 输入 cnpm install

 

5、已经安装完成之后,我们来测试一下下载好的模板是否能够正常的运行,输入 cnpm run dev 运行服务,复制本地端口网址,在浏览器中去访问。

访问网址,能够成功访问到页面,就表示安装成功,可以开始做vue-cli项目了。

 

6、我们打开WS将创建好的项目引入进来,简单介绍一些每个文件目录存放的资源信息

(没有安装WS的可以使用Hbulider中打开文件)

Build       放置的是一些项目的配置文件(默认不动)

Config     是针对于开发环境和线上换环境的一些配置文件(默认不动)

Node_modules  项目的依赖

Src            指的是我们的源代码

Static       放置的是一些静态资源

Main.js文件里面注册了一个局部组件

Vue.vue是页面上显示的内容,vue文件内容主要分成三个部分,模板、脚本和样式。

不太清楚的建议去看看相关的视频

https://www.imooc.com/video/16985

Logo

前往低代码交流专区

更多推荐