Vue.js学习笔记——15.使用Vue-CLI创建项目

最新推荐文章于 2024-04-05 10:24:28 发布

土拨鼠的忧伤丶

最新推荐文章于 2024-04-05 10:24:28 发布

阅读量336

点赞数

分类专栏： Vue.js学习笔记文章标签： vue.js 学习 webpack

本文链接：https://blog.csdn.net/DDDDDecade/article/details/124687274

版权

Vue.js学习笔记专栏收录该内容

17 篇文章 2 订阅

订阅专栏

Vue-CLI是Vue.js的官方脚手架，用于快速搭建Vue项目。它提供预设的项目结构，包括本地服务器、热重载等功能。安装Vue-CLI需要先确保安装Node.js，然后通过npm全局安装。创建项目可通过命令行或图形化界面，命令行创建时可以选择预设或手动配置。项目创建后，通过npm run serve启动本地服务器，代码保存后会自动刷新页面。

摘要由CSDN通过智能技术生成

一、什么是Vue-CLI？

vue-cli 也称为脚手架，在生活中脚手架是为了保证各施工过程顺利进行而搭设的工作平台，在项目中，脚手架就是帮助我们搭建工程的一个工具，用来帮助快速的搭建vue的开发环境，自动生成vue.js+webpack的项目模板，cli只是其中一种。

vue-cli的优势在于提供了成熟的vue项目架构设计，让开发者能够开箱即用，能不配置的就不配置；提供了本地测试服务器，附带模块热重载；集成打包上线方案；可视化用户界面等，让开发者能够愉快的进行代码开发。

二、如何安装Vue-CLI？

关于安装方法，vue-cli的官网已经介绍的很详细：安装 | Vue CLI 这里就简单介绍。

前置环境

撰写本文时cli的版本为Vue CLI 4.x，需要有Node.js环境。
版本要求
在命令行中输入以下命令查看电脑的node版本和npm版本：

node -v
npm -v

查看版本
若是没有node则需安装，网上的安装教程也有很多，嫌麻烦的就直接打开官网的下载页面 Download | Node.js 选择下载LTS中对应系统的安装包。Windows系统的话下载红框可避免配置。
Node安装

下载完成后打开安装包，一直Next下一步安装即可。安装完成后再次运行命令行命令查看版本，成功显示版本号即安装成功。

安装Vue-CLI

执行以下命令安装Vue-CLI

npm install -g @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。执行以下命令查看版本号

vue --version

若成功执行，则简简单单的安装就完成了。

三、如何使用Vue-CLI？

通过命令行创建项目

在磁盘中新建一个文件夹作为项目存放地，然后使用命令行cd进入当前目录（或直接在资源管理器的文件路径处输入cmd后回车），然后命令行执行

vue create 你的项目名
#如
vue create hello-world

你会被提示选取一个配置创建项目，使用键盘上下箭头移动光标，回车选择

默认的配置包含了基本的 Babel + ESLint 设置，手动选择配置来看看。手动设置提供了更多的选项，使用键盘上下箭头移动光标，空格启用功能，回车进入下一步。这里把Linter / Formatter取消，进入下一步。
手动配置
选择Vue版本，这里选择Vue 2.x版本
版本选择
选择你想把你的配置文件放在一个独立的配置文件中？还是放到package.json中？选择package.json即可

是否保存以上设置方便下次选择？这里选择否如果选择是下面还要给你的配置取个名字。
保存配置
之后等待项目创建完毕

可以按照提示执行命令启动本地服务器运行项目，也可以使用编辑器打开项目文件夹，在编辑器内置终端运行项目。

# 进入项目目录
 cd hello-world
# 启动开发服务器 运行项目
 npm run serve

成功运行后出现两个地址，按住Ctrl点击其中一个或复制到浏览器打开
运行项目
成功出现默认欢迎页面则项目运行成功
项目页面
启动本地服务器后，项目代码将带有热重载功能，即编写代码保存后，服务器将自动为你重新编译并刷新页面，省去一些繁琐的操作。项目运行时命令行终端不能关闭，所以还是使用编译器的内置终端方便一些。

通过图形化界面创建项目

在命令行使用vue ui指令可以在浏览器打开图形化界面。

vue ui

运行完成会在浏览器自动打开一个项目管理器，所有配置、运行、打包、插件管理的操作都可以通过这个界面完成，减少使用命令行的操作。同样，使用 vue ui 期间，终端不能关闭。

点击创建，选择要创建的位置

填写项目名（尽量小写，大写会自动转为小写），选择npm或其他包管理器。

选择配置，跟命令行的大同小异，不过提供了中文，也不要敲键盘了，直接点击就好。再手动配置看看
配置项
一模一样，该有的都有，就不详细说明了。一样是把Linter / Formatter取消，进入下一步

选择使用的Vue版本，创建项目，不保存预设
版本选择

等待创建项目。命令行会自动执行创建操作。
创建中
创建完成，进入项目主页，左侧菜单功能都一目了然。进入左侧菜单任务项，点击serve选项

点击运行按钮即可启动本地服务器运行项目

编译成功后点击启动app 即可打开项目页面，或者点击输出进入类似终端的窗口，使用链接的方式进行跳转。

成功跳转到项目页面

项目目录结构

项目结构
node_modules 文件夹：存放安装的依赖包。
public 文件夹：静态资源，webpack 进行打包的时候会原封不动打包到dist文件夹中。
src 文件夹：程序员代码文件夹，在此文件夹内创建并编写代码。
主要看一看src下的目录结构
scr目录
assets 文件夹：存放公用的静态资源（放置在assets文件夹里面的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包到JS文件里面）
components 文件夹：存放非路由组件（全局组件），其他组件放在views或者pages文件夹中
App.vue：唯一的根组件
main.js：程序入口文件，最先执行的文件