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

1、检查当前Vue版本

输入下面的命令检查当前安装的Vue-cli版本:
在这里插入图片描述
如果提示vue不是内部命令,那么请输入

npm install -g @vue/cli

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

2、使用命令行创建项目

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

1.输入创建命令

vue create my-demo

如下图所示:
在这里插入图片描述

输入命令以后直接回车,有的会提示如下图
在这里插入图片描述

说你默认pnpm注册表的连接似乎很慢。

使用https://registry.npmmirror.com快速安装? 我们选择Y也可以

输入Y以后出现下图
在这里插入图片描述
然后会让你选择是使用默认(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得区别了,不懂得小伙伴去百度查一下就可以了。
在这里插入图片描述

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

在这里插入图片描述

注意:使用键盘的上下方向键可以上下选择切换,空格键是选中或者取消,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测试。

根据我们项目所需选择我们要安装得选项
在这里插入图片描述
选择好以后直接回车,进入选择界面:
在这里插入图片描述

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

这里我选择3.x
选择好以后直接回车,进入路由配置选择界面
在这里插入图片描述

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

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

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

在这里插入图片描述

pnpm run serve

如下图启动成功
在这里插入图片描述

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

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

猜你喜欢

转载自blog.csdn.net/qq_27244301/article/details/128797280#comments_27608112