每个人都有惰性#xff0c;但不断学习是好好生活的根本#xff0c;共勉#xff01;

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

…

——《宣城见杜鹃花》

node的下载、安装、配置和使用node.js下载安装和配置、npm命令汇总、cnpm的使用

Vue入门第一篇环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等

Vue入门第二篇基本语法、实例演示

CLI‌是一个基于Vue.js进行快速开发的完整系统‌包括项目脚手架、‌开发服务器、‌构建工具等。

‌当你安装vue-cli后‌它已经包含了Vue.js的运行时环境‌因此不需要再单独安装Vue。

‌vue-cli提供了命令行工具来快速创建和管理Vue项目‌包括项目的初始化、‌开发服务器的启动、‌构建和部署等

关于vue

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

npm

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

vue

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

1.4.1

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

npm

找到下D:\JavaSoftWares\Node\node_global

其中vue.cmd文件就是执行vue命令的脚本文件将该文件所在位置的目录配置到path路径下即可全局操作vue命令

1.4.3

搜索控制面板–打开系统安全–选系统–点击高级系统设置–环境变量–系统变量–Path–编辑–新建

1.5

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

2.1

以管理身份打开命令符窗口否则可能还会遇到2.1.5那个无权限问题

全路径为F:\STUDY\Front\Vue\Vue3\Vue3-CLI\Projects

2.2

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

f:2.3

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

vue

vue3-demo-cli-01这里先预览一下整体的配置心里有个底后面会有每一步具体的操作演示如下图

select

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

2.4

执行命令后如下可以选择默认的Vue3或Vue2也可以选择手动配置

select

选择模块使用上下键调整位置然后空格勾选a全选i取消选项回车完成进入下一步

这里我们除了默认勾选的两个之外再选一个Router即可回车进入下一步

TypeScript

下面是路由模式的选择使用history模式还有一种是hash模式输入Y回车

2.8

关于Babel、ESLint等的配置存放位置选择存放在专用的配置文件中

2.11

保存后下次再次创建项目时就会出现vue3-b-r-l这个选项可直接使用该配置而无需再一一选择如下

2.13

serve如下即为启动成功可通过Local和Network两个地址进行访问

2.15

在最后一行提示信息中还有一个命令可以构建项目用于生产环境应用的文件

项目发布到生产环境前构建版本执行以下命令会生成一个./dist文件夹

npm

可在Vscode中的控制台执行命令运行项目与上面的命令一样这里不做演示

感谢阅读祝君暴富