快速安装软件&配置必要插件
安装开发软件vs code(visual studio code) 官网网址:https://code.visualstudio.com/
![](https://img-blog.csdnimg.cn/img_convert/84a25ea6e8d3b39e29a548ca1ee1992f.png)
解压缩后我们得到两个文件
![](https://img-blog.csdnimg.cn/img_convert/273bbe95834f307d39bbb397c0e9f054.png)
将visual studio code.app直接拖拽到应用程序中(也可以选择安装visual studio)
![](https://img-blog.csdnimg.cn/img_convert/83a9b128613aa58636b1580e03085adc.png)
双击打开vs code
点击左侧插件功能按钮,安装常用的插件库
![](https://img-blog.csdnimg.cn/img_convert/b89244ef5aba315e7636a5f2e29468fa.png)
Chinese (Simplified) (简体中文) Lan、Vetur(Ping Wu)、Vite、Vue Language Features (Volar)
TypeScript Vue Plugin (Volar)、ESLint、Prettier - Code formatter等等
将vs studio窗口语言转换成中文
首先安装Chinese (Simplified) (简体中文) Lan 插件;重启vs code app ;
安装包管理工具
了解npm npx cnpm yarn pnpm区别,早年npm工具被很多诟病才有了cnpm、yarn、pnpm工具。这些都是基于npm包管理器的一些变种。解决了早期npm的一些缺点,例如下载速度慢,不能离线下载等。
安装指令:npm install -g pnpm(如果安装yarn 安装指令:npm install -g pnpm);-g 表示全局安装,如果需要局部安装可以进一步了解
![](https://img-blog.csdnimg.cn/img_convert/7c7450b4aba64412011a2d4aa6b832d5.png)
安装脚手架Vue CLI&项目搭建
(推荐局部安装Vue CLI)
创建一个文件夹(例如:vue)用于以后项目管理。在控制台中通过指令cd 进入该文件夹
控制台中输入npm install @vue/cli -g,安装cli
控制台中输入npx vue -V ,打印@vue/cli 5.0.8版本号,检查是否安装成功
创建Vue工程
创建一个名称为"vue-coming"的项目工程,接着上一步输入指令:npx vue create vue-coming
光标默认选择vue3 回车
在vue文件夹下就可以看到我们的工程
![](https://img-blog.csdnimg.cn/img_convert/06bd54125a371a7406bda1f784b764a6.png)
输入指令:cd vue-coming
输入指令:code . (这里有个点)自动启动visual studio app启动应用程序默认打开工程