安装vue出现的问题、创建vue项目

安装vue出现的问题，已解决

首先确保node安装完成

-g 全局

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊没及时整理 上面这个截图我也不记得是哪一步了，，，哭死，先留着吧，，等以后万一想起来了再来修改

当时折腾了好久，我这个是因为很久很久很久以前装过。。。

其实百度一下“‘vue’不是内部或外部命令，也不是可运行的程序或批处理文件。”跟着前辈整理的步骤来就行，总归是能解决的！问题不大，不要慌~

安装成功√

---

 整理一下几个创建vue项目的方式 

 1 webpack预编译构建工具

 先创建一个demo文件夹，例：

 地址栏输入cmd

回车 ，弹出cmd命令窗口

 输入创建命令

vue create demo-webpack

 回车如图所示：

Your connection to the default yarn registry seems to be slow.
 Use https://registry.npmmirror.com for faster installation?

你与注册表的连接默认是yarn ，速度似乎不是很快，是否使用npm来进行更快的安装？

如果选择n （否），切换到如下命令界面

Please pick a preset   选择一个预设

因为我们要使用TypeScript开发 Vue3 的代码，所以不能直接使用第二项默认模板， 这里我们选自定义（键盘上下键滑动到第三个），回车

这时出现了更多自定义选择（我的选择如下）：

 上下键移动，空格选中

 如果没有设置好误点回车，按住Ctrl一直点C，此为取消当前命令

 Choose a version of Vue.js that you want to start the project with  选择vue的版本

选择vue的版本，选3.x

因为 Vue 2 的终止支持时间是 2023 年 12 月 31 日。在此之后，Vue 2 在已有的分发渠道 (各类 CDN 和包管理器) 中仍然可用，但不再进行更新，包括对安全问题和浏览器兼容性问题的修复等。

 Use class-style component syntax?   是否使用class风格的组件语法

这里选y

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills,
transpiling JSX)?  是否使用TypeScript和Babel的形式编译 JSX

jsx是react里的模板语法，在vue里写jsx不如在react中写，所以这里选n

  Use history mode for router?  是否使用history模式的路由

选n 

  Pick a CSS pre-processor  选择一个css预编译工具

在前两个中任意选（sass安装稍微麻烦一点）  前两个都是前端常用的，最后一个是写原生css

Pick a linter / formatter config  前端代码规范性检查

选第三个Standard

Pick additional lint features:  选择在什么时机下触发代码格式校验： 

 严谨一点 全选

Where do you prefer placing config for Babel, ESLint, etc.?  更愿意配置文件写在哪里

这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

Save this as a preset for future projects? 是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。

这里根据自己需要输入 y 或者 n，我这里输入 n 不需要。 

Pick the package manager to use when installing dependencies:  选择使用什么包管理来进行下载

这里根据自己的偏好选择就行 ，我选的yarn

此时我们的文件夹中也有了很多东西

 部分参考链接：

一. Vue项目初始化 - 知乎 (zhihu.com)

vue3安装和开发环境搭建_use babel alongside typescript (required for moder_小番茄夫斯基的博客-CSDN博客

---

 再次看到cmd界面，输入命令

cd demo-webpack

也可以直接复制界面内的，选中按 回车 即为 复制 ，鼠标 右键单击 即为 粘贴

 

 输入yarn serve

上面两个地址都是可以访问到项目的 

关闭项目 Ctrl+CCCCCCCCCC，出现如下情况就可以了 

 

 关闭之后项目就不可以打开了

 项目导入vscode（也可以在cmd界面输入code .[注意点前面有空格]），打开package.json文件，点击上面的调试或Debug

 

在上面的跳出来的框框下面选择serve

如果遇到以下 报错 信息  解决办法如下：

【解决】系统上禁止运行脚本：提示：https:/g o.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。_songywaa的博客-CSDN博客https://blog.csdn.net/weixin_42288182/article/details/109573452再次Debug调试

---

 2 官网推荐的创建模式 

在要创建项目的文件夹中打开cmd

输入命令

npm init vue@latest

回车，出现如下图所示 

 

输入y，回车

 输入项目名称，回车

 

左右键控制，选择Yes，回车 

 No，回车

 Yes，回车

 No，回车

 都行，影响不大，这里我选Yes

 Cypress

 Yes

 No

 创建完成

 对比两个项目

 最大的区别是 node_modules，放的是项目所有的依赖

 再回到cmd，输入cd demo-vite 进入文件

输入yarn

3 可视化创建vue项目

在创建项目的文件夹打开cmd，输入vue ui，如图所示：

 回车

 随后自动打开vue项目管理界面

 按图示操作，新建文件夹

 输入项目名称，点击创建

 

 之后如图所示

 点击“在此创建新项目”

 点击下一步，跳到预设界面

这些预设、功能和配置都和之前命令界面一样配置就行