如何创建Vue项目

如何创建Vue项目VueCLI 是一个基于 vue js 进行快速开发的完整系统 是一组用于快速原型设计 简化应用程序搭建和进行高效项目管理的工具 确保了各种构建工具能够给予智能的默认配置即可平稳衔接

大家好,欢迎来到IT知识分享网。

一、Vue项目化

1.1快速构建项目

  1.1.1 Vue ClI简介

             Vue CLI是一个基于vue.js进行快速开发的完整系统,是一组用于快速原型设计、简化应用程序搭建和进行高效项目管理的工具,确保了各种构建工具能够给予智能的默认配置即可平稳衔接。这样,开发者可以专注在。撰写应用上,而不必花很多时间处理配置的问题。

1.1.2Vue ClI三个组件

1、CLI

CLI是一个npm包,通过Vue.js命令提供核心功能。它可以轻松构建一个新项目,同时,如果你希望通过可视化界面来构建(创建)项目的话,你可以运行vue ui命令行来打开可视化界面。

如何创建Vue项目

2、CLI Service

CLI Service是一个开发依赖项,安装在脚手架项目当中,可以帮助开发项目、打包项目和检查项目的一些相关配置。

3、CLI插件

CLI插件也是npm的包,可以为项目提供一些额外的功能,在开发的过程中,可以通过命令行vue add添加CLI插件,比如路由插件(vue-router)、vuex插件等等。

1.1.3vue脚手架项目环境配置

1、下载安装node,下载之后一步步默认安装即可。

软件地址:下载 | Node.js 中文网 (nodejs.cn)

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

如何创建Vue项目

3、下载安装VScode代码编辑工具

官网地址:Visual Studio Code – Code Editing. Redefined

4、vue2项目调试插件,下载vue.js_devtools,本课程使用此插件

下载,解压,把.crx结尾的文件拖入浏览器的扩展程序中即可使用。

  1.1.4使用Vue Cll构建项目

 1、Vue CLI手脚架的安装

  a.如果已经安装了vue-cli,需要进行卸载

    命令: npm uninstall vue-cli -g

  b.通过npm全局安装@vue/cli脚手架 

如何创建Vue项目

2、Vue create命名创建项目

1.创建项目时需要的命令:Vue create 项目名

如何创建Vue项目

执行命令后

如何创建Vue项目

2.在这个步骤中,可以使用键盘的↑和↓方向键选择创建项目的方式,default是默认选择项,表示使用默认的方式创建项目;Manually select features选项表示使用手动配置方式创建项目,在这里,我们选择手动的方式创建,手动配置界面如下图所示:

如何创建Vue项目

此界面中,可以使用键盘的↑和↓方向键选择创建项目的方式,按住空格键选择某一项,再次按住空格键,取消选择。

然后我们的项目就已经创建成功了。

1.2启动项目

1.2.1如何启动项目

我们进入项目后在查看中选择终端,然后在控制台输入命令:npm run serve

如何创建Vue项目

如何创建Vue项目

以下便是项目启动成功

如何创建Vue项目

如何创建Vue项目

注:

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

        这样我们的项目就创建完成了。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/125535.html

(0)
上一篇 2025-09-26 15:26
下一篇 2025-09-26 15:45

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信