如何创建项目

目录

一、安装node

二、安装插件

三、了解npm

1.概速

2.使用场景需求

3.npm常用命令行

四、安装脚手架

五、创建项目

1.vue create 命令创建项目 

2.启动项目

---

一、安装node

大家可以根据自己电脑的版本选择node。

出现下面情况说明没有安装

检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

二、安装插件

安装成功后我们需要安装调试插件Vue_Devtools_v6.4.5，下载完成把它拖入到扩展程序即可。

三、了解npm

1.概速

npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题，只要电脑成功安装了node，npm也会自动安装在电脑上。

2.使用场景需求

从npm服务器下载别人编写的第三方包到本地使用。

从npm服务器下载并安装别人编写的命令程序到本地使用。

将自己编写的包或命令行程序上传到npm服务器供别人使用。

3.npm常用命令行

            npm install：安装项目所需要的全部依赖包，需要配置package.json文件。

           npm uninstall：卸载指定名称的包。

           npm install 包名：安装指定名称的包。

           npm update：更新指定名称的包。

           npm run serve：项目启动。

           npm run build：项目构建。

           npm config get registry  ：查看当前npm下载包使用的是哪一个源。

           cmd命令行输入指令安装淘宝镜像:

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

四、安装脚手架

windows+r 输入cmd 进入终端控制台

 通过npm全局安装@vue/cli脚手架  @3.10表示下载某个指定版本，如果不写，则下载最新版本

 npm install -g @vue/cli

 注意：如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装。 

安装淘宝镜像的命令行

          ①  npm install -g cnpm --registry=https://registry.npmmirror.com

如果安装了cnpm淘宝镜像，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

          ②  cnpm install -g @vue/cli

如需要卸载vue/cli包，可执行以下命令行

         ③npm uninstall -g @vue/cli

安装过程可能报错

 原因可能是前期安装出错，我们可以卸掉重装；还有可能是磁盘满了，我们可以清理一下磁盘空间

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。

成功安装界面

五、创建项目

创建项目的时候我们需要进入到自己的文件夹下进入创建，以免到时候找不到。

1.vue create 命令创建项目 

vue create helloworld

 helloworld 是项目名，可自行定义 

执行 vue create 命令之后，可看到如下图界面

我们选择手动选择功能，进入到下一个界面

在这个界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，Enter进入下一界面。

 

大家可以根据自己的需求进行选择，因为下面的学习我将用到如图所示的功能，所以我选了四个功能。 

安装过程有一些选择，大家可自行选择，当然也可一按照如下图所示进行选择

中间的一些选项默认即可。

2.启动项目

项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：

cd helloword

npm run serve

我们在浏览器输入：http://localhost:8080/  地址，即可看到如下页面 

当然，我们也可以使用图形界面创建项目，在终端控制台输入 vue ui

在浏览器窗口输入：localhost:8000

 进入此界面点击创建

 回车后点击“在此创建新项目”

输入项目名点击下一步 

选择手动，下一步

这里我取消了该选项，大家可自行决定，点击创建项目，我没有保存预设。

创建成功后我们就可以看到如下页面。

 

我们可以在终端控制台看到如下界面

这时在浏览器输入 http://localhost:8080 就可以看到如下界面了。

 回到我们自己的文件夹就可以看到我们使用图形化界面创建的项目了。

以上就是创建项目的全部过程啦，在创建项目的过程中，如果遇到了暂时想不起来的函数或指令，可以点击这里进行查找哦，我就经常在这里查询，有什么不对的地方欢迎大家纠错，一起学习，一起努力吧！