基于Vue CLI 3构建Vue3项目（Vue2也可参考）

最新推荐文章于 2024-07-19 18:41:59 发布

寒山李白

最新推荐文章于 2024-07-19 18:41:59 发布

阅读量978

点赞数 18

分类专栏： # Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/mo_sss/article/details/140401600

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

蜀国曾闻子规鸟，宣城还见杜鹃花。
一叫一回肠一断，三春三月忆三巴。
——《宣城见杜鹃花》

Node.js的下载、安装和配置
 node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）
Vue3入门之创建vue3的单页应用(vite+vue)
Vue入门第一篇（环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等）
Vue入门第二篇（基本语法、实例演示）
Vue专栏

使用Vue CLI构建Vue3项目

vue-cli（‌Vue CLI）‌是一个基于Vue.js进行快速开发的完整系统，‌包括项目脚手架、‌开发服务器、‌构建工具等。‌当你安装vue-cli后，‌它已经包含了Vue.js的运行时环境，‌因此不需要再单独安装Vue。‌vue-cli提供了命令行工具来快速创建和管理Vue项目，‌包括项目的初始化、‌开发服务器的启动、‌构建和部署等

1. Vue3脚手架的安装

关于vue cli的安装需要在管理员权限下进行（以管理员身份运行cmd窗口）

vue-cli 3.x的安装

1.1 默认安装

安装vue-cli 3.x版本的命令，不指定版本会安装最新版本，如果安装报错，可参考2.1.5尝试解决

npm i -g @vue/cli

i ：install的缩写
-g ：global的缩写

安装完成后如下
在这里插入图片描述

1.2 指定版本安装

指定版本安装的命令（当前最新稳定版本为3.4.31）

npm install -g @vue/cli@3.4.31

1.3 查看版本

安装后使用以下命令查看版本，如果命令提示'vue'不是内部或外部命令则根据2.1.4进行环境变量配置，配置后再进行版本查看

vue --version

或

vue -V

在这里插入图片描述

1.4 配置vue cli的环境变量

Vue CLI默认的安装位置是全局node_modules，如果你没有配置过，则就是该目录加入到path环境变量

1.4.1 查看模块存储的全局目录

当然，如果你不知道有没有配置过，可以使用命令获取你当前的全局模块存储路径，将这个路径加入Path环境变量即可
查看当前的全局模块存储目录的命令如下

npm config get prefix

我之前配置过全局缓存和模块存储位置（使用npm config set prefix命令），则安装的位置就是我修改过的目录了
在这里插入图片描述

1.4.2 查看安装的Vue CLI

找到目录，之前安装的Vue CLI就在这个目录下（D:\JavaSoftWares\Node\node_global）
其中vue.cmd文件就是执行vue命令的脚本文件，将该文件所在位置的目录配置到path路径下，即可全局操作vue命令
在这里插入图片描述

1.4.3 配置环境变量

可以快捷方式找到高级系统设置：win+x然后点系统
也可按照如下操作一步一步找到高级系统设置

搜索控制面板–>打开系统安全–>选系统–>点击高级系统设置–>环境变量–>系统变量–>Path–>编辑–>新建
然后将vue.cmd所在的目录，也就是我们刚刚使用npm config get prefix命令查看到的目录放进去
在这里插入图片描述
然后一路确定下去即可完成环境变量的配置
现在再重新打开任意位置的cmd窗口，输入vue -V命令查看即可

1.5 安装遇到的问题

如报错如下，则表示未使用管理员权限执行命令，无权限创建相关文件
在这里插入图片描述
解决方法
使用管理员身份运行cmd窗口并执行安装命令，如下

然后再执行一遍安装命令即可安装成功

2. Vue3项目构建

使用Vue CLI 3.x构建项目

创建时，命令执行的位置最好cd到C盘以外的某个位置，执行命令的位置就是项目创建的位置

2.1 创建项目文件夹

以管理身份打开命令符窗口，否则可能还会遇到2.1.5那个无权限问题
先在C盘以外的盘，如F盘，创建一个文件夹用于存放项目
我这里先在F盘创建一个Projects目录
全路径为F:\STUDY\Front\Vue\Vue3\Vue3-CLI\Projects
在这里插入图片描述

2.2 切换路径到指定位置

使用管理员身份打开cmd窗口，cd到刚刚创建的目录位置

cd F:\STUDY\Front\Vue\Vue3\Vue3-CLI\Projects

这里因为是从C盘切换到F盘的位置，所以直接cd加路径并未切换成功，此时再输入盘符加冒号回车即可成功，如下

f:

在这里插入图片描述

2.3 创建项目

执行创建命令，项目命令自定义，建议全小写，我这里项目名称定义为vue3-demo-cli-01

vue create vue3-demo-cli-01

这里先预览一下整体的配置，心里有个底，后面会有每一步具体的操作演示，如下图
在这里插入图片描述
以上的配置按顺序从上到下依次是：

选择预设配置，这里选的手动配置Manually select features
为项目确认所选模块，这里选了三个Babel、Router、Linter，其含义分别是JS转义工具、vue路由、代码规范工具
选择vue的版本，这里选择3的版本
是否为路由使用历史模式，这里选择是
为代码规范工具选择配置，这里选择标准配置
代码规范的额外配置，选择何时开启代码规范的检测，选择保存后开启
对于Babel、ESLint等的配置存放到哪里，这里选择存放到专有配置文件下
是否保存以上设置以便于后续创建项目使用，这里选择是
保存设置的名称为，这里起个名，自定义即可，我这里取名为vue3-b-r-l

2.4 项目预设

执行命令后如下，可以选择默认的Vue3或Vue2，也可以选择手动配置
这里我们手动选择，使用上下键选择Manually select features
在这里插入图片描述

2.5 项目模块

选择模块，使用上下键调整位置，然后空格勾选，a全选，i取消选项，回车完成进入下一步
这里我们除了默认勾选的两个之外再选一个Router即可，回车进入下一步
在这里插入图片描述
关于选项的解释如下：
Babel是一个JS的转义工具
TypeScript 是否需要TS
Progressive Web App (PWA) Support 渐进式Web应用
Router Vue路由
Vuex Vue状态管理器
CSS Pre-processors 是CSS的预处理器，如sass less
Linter/Formatter 是保障代码规范的工具，如ESLint
Unit Testing 单元测试
E2E Testing E2E测试