教你如何使用Vue-cli创建一个Vue项目流程

一时失言乱红尘 2023-09-24 16:28 34阅读 0赞

### 1、检查当前Vue版本 ###

输入下面的命令检查当前安装的Vue-cli版本：  
![在这里插入图片描述][21d298e99cb7413db1935444a39aed48.png]  
如果提示vue不是内部命令，那么请输入

npm install -g @vue/cli

注意：检查vue-cli版本得时候 V一定要大写

### 2、使用命令行创建项目 ###

我们先创建一个文件夹，D:\\project\\vue-demo vue-demo就是我们创建的文件夹，进入根目录，cmd运行  
![在这里插入图片描述][102a4bd6174f44349d743a9dbf225b03.png]

#### 1.输入创建命令 ####

vue create my-demo

如下图所示：  
![在这里插入图片描述][83fc8f0bce834408823efbedcc45474f.png]

输入命令以后直接回车，有的会提示如下图  
![在这里插入图片描述][c953c9c4588548f4a1f3ce2b42e063d6.png]

> 说你默认pnpm注册表的连接似乎很慢。
> 
> 使用https://registry.npmmirror.com快速安装? 我们选择Y也可以

输入Y以后出现下图  
![在这里插入图片描述][835e3d7fbbc045c28f34b2f1fa8de1c0.png]  
然后会让你选择是使用默认（default）选择安装vue3还是vue2，根据自己需求选择，我这里默认安装vue3，还是手动（Manually）。

##### 1.我们先选择默认安装如下： #####

Vue CLI v5.0.8
    ? Please pick a preset: Default ([Vue 3] babel, eslint)
    ? Pick the package manager to use when installing dependencies: (Use arrow keys)
    
    > Use PNPM
      Use NPM

> Pick the package manager to use when installing dependencies  
> 选择安装依赖项时要使用的包管理器

我们pnpm安装，这里我就不过多讲解pnpm和npm得区别了，不懂得小伙伴去百度查一下就可以了。  
![在这里插入图片描述][dc4fd5a5de6b438bab1abd2f0efbe1ec.png]

##### 2.我们先选择手动安装如下： #####

![在这里插入图片描述][8f32e6f9fbb6467cb4fdb28daad44968.png]

> 注意：使用键盘的上下方向键可以上下选择切换，空格键是选中或者取消，a是全选

首先我先讲解一下各个选项都是什么意思

1.  TypeScript：支持使用TypeScript进行编码。
2.  Progressive Web App (PWA) Support：PWA支持。
3.  Router：支持vue-router。
4.  Vuex：支持Vuex状态管理。
5.  CSS Pre-processors：支持CSS预处理器。
6.  Linter / Formatter：支持代码风格检查和格式化。
7.  Unit Testing：支持单元测试。
8.  E2E Testing：支持E2E测试。

根据我们项目所需选择我们要安装得选项  
![在这里插入图片描述][aa4161fca0ab4708805592c679061537.png]  
选择好以后直接回车，进入选择界面：  
![在这里插入图片描述][35bf3c865924493ab1d56ed3395300a2.png]

> Choose a version of Vue.js that you want to start the project with 选择一个Vue.js版本来启动项目

这里我选择3.x  
选择好以后直接回车，进入路由配置选择界面  
![在这里插入图片描述][43093560fd884945b9abc53868c8e49a.png]

> 注意：Y表示使用history模式，N表示使用hash模式(即URL地址里面带有

选择好以后继续回车，然后选择CSS预处理器，这里选择Less模式：  
![在这里插入图片描述][c7d03831996c479ab6f3abff341f3b4e.png]  
继续回车，选择标准得配置作为代码检查  
![在这里插入图片描述][a8b79372736846a9a51a0cb180ba08b8.png]  
继续回车，样式检查选择保存的时候进行检查：  
![在这里插入图片描述][c8397aa5f09e45ad8b9afe5a42f02cfa.png]  
继续回车，选择路由方式（y或n选择y)并选择 In package.json  
![在这里插入图片描述][a20701a2354e42fe80c6c8a0a0edcf9c.png]  
继续回车，最后问你是否将这次配置保存为未来项目的预设，可以选择yes，我们默认回车就可以了，  
![在这里插入图片描述][c774a653d575499cb6af5c557f0faa64.png]  
最后看到下图就说明我们配置创建成功了：  
![在这里插入图片描述][04fbd0ac6c1c4078aac7231ba9f0755f.png]

##### 3.两种模式都创建完成了，我们启动服务 #####

![在这里插入图片描述][47a6943d1bb74c888b0a9881adec3c8d.png]

pnpm run serve

如下图启动成功  
![在这里插入图片描述][4f45e2f8178a4248894f18416a743341.png]

在浏览器输入 http://localhost:8080/ 出现下面页面就说明我们的项目启动成功了  
![在这里插入图片描述][508adfe3de6244859637da26492277e2.png]

到此为止就通过命令行的选择和命令操作创建了一个vue工程。

[21d298e99cb7413db1935444a39aed48.png]: https://img-blog.csdnimg.cn/21d298e99cb7413db1935444a39aed48.png
[102a4bd6174f44349d743a9dbf225b03.png]: https://img-blog.csdnimg.cn/102a4bd6174f44349d743a9dbf225b03.png
[83fc8f0bce834408823efbedcc45474f.png]: https://img-blog.csdnimg.cn/83fc8f0bce834408823efbedcc45474f.png
[c953c9c4588548f4a1f3ce2b42e063d6.png]: https://img-blog.csdnimg.cn/c953c9c4588548f4a1f3ce2b42e063d6.png
[835e3d7fbbc045c28f34b2f1fa8de1c0.png]: https://img-blog.csdnimg.cn/835e3d7fbbc045c28f34b2f1fa8de1c0.png
[dc4fd5a5de6b438bab1abd2f0efbe1ec.png]: https://img-blog.csdnimg.cn/dc4fd5a5de6b438bab1abd2f0efbe1ec.png
[8f32e6f9fbb6467cb4fdb28daad44968.png]: https://img-blog.csdnimg.cn/8f32e6f9fbb6467cb4fdb28daad44968.png
[aa4161fca0ab4708805592c679061537.png]: https://img-blog.csdnimg.cn/aa4161fca0ab4708805592c679061537.png
[35bf3c865924493ab1d56ed3395300a2.png]: https://img-blog.csdnimg.cn/35bf3c865924493ab1d56ed3395300a2.png
[43093560fd884945b9abc53868c8e49a.png]: https://img-blog.csdnimg.cn/43093560fd884945b9abc53868c8e49a.png
[c7d03831996c479ab6f3abff341f3b4e.png]: https://img-blog.csdnimg.cn/c7d03831996c479ab6f3abff341f3b4e.png
[a8b79372736846a9a51a0cb180ba08b8.png]: https://img-blog.csdnimg.cn/a8b79372736846a9a51a0cb180ba08b8.png
[c8397aa5f09e45ad8b9afe5a42f02cfa.png]: https://img-blog.csdnimg.cn/c8397aa5f09e45ad8b9afe5a42f02cfa.png
[a20701a2354e42fe80c6c8a0a0edcf9c.png]: https://img-blog.csdnimg.cn/a20701a2354e42fe80c6c8a0a0edcf9c.png
[c774a653d575499cb6af5c557f0faa64.png]: https://img-blog.csdnimg.cn/c774a653d575499cb6af5c557f0faa64.png
[04fbd0ac6c1c4078aac7231ba9f0755f.png]: https://img-blog.csdnimg.cn/04fbd0ac6c1c4078aac7231ba9f0755f.png
[47a6943d1bb74c888b0a9881adec3c8d.png]: https://img-blog.csdnimg.cn/47a6943d1bb74c888b0a9881adec3c8d.png
[4f45e2f8178a4248894f18416a743341.png]: https://img-blog.csdnimg.cn/4f45e2f8178a4248894f18416a743341.png
[508adfe3de6244859637da26492277e2.png]: https://img-blog.csdnimg.cn/508adfe3de6244859637da26492277e2.png