vue3.0，Vue/Cli脚手架4.0的创建

最新推荐文章于 2024-02-13 18:10:14 发布

龙怪神

最新推荐文章于 2024-02-13 18:10:14 发布

阅读量352

点赞数 2

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_43824526/article/details/116608686

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.由于vue/cli的需要node.js8.9及更高版本，若您使用的vue/cli版本太低，请你重新下载最新版本

npm uninstall vue-cli -g  #该命令是卸载当前vue/cli版本

或者可以升级当前的vue/cli
npm update -g @vue/cli

2.使用Vscode，打开新的终端，进入要项目存放的目录,首先执行以下几个命令

npm install -g @vue/cli 
vue -vsersion  #查看vue版本

3.环境搭建成功后，即可创建项目，在想要存放项目的文件目录下，输入如下命令

vue create vue_demo #vue_demo是项目名称

在这里插入图片描述

4.回车后会显示下图
在这里插入图片描述

第一个选项是我自己以前创的，你们没有。熟悉流程之后，可自己创建自己的项目配置。

第二、三个是默认设置，适合快速创建项目，但里面的想要的组件太少。所以我们选择第4个选项--manually select features（自定义选择配置）。

我们用箭头方向键↑和↓进行选择，enter（回车键）键进行选择最后一个选项。

5.回车后会出现如下图
在这里插入图片描述

选项	说明
Babel	转码器，用于将ES6代码转为ES5代码，从而可以在现有环境下执行
TypeScript	TypeScript是JavaScript的一个超集，主要提供了类型系统和对ES6的支持。可编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上
Progressive Web App（PWA）Support	支持渐进式web应用程序
Router	路由，用于页面间的跳转（在浏览器端）
Vuex	全局状态管理
CSS Pre-processors	css预处理器（如Less,Sass）
Linter/ Formatter	代码风格检查和格式校验（如ESLint）
Unit Testing	单元测试
E2E Testing	end to end测试

6.我们用Space（空格键）键进行选定如下选项

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dWpsvppf-1620649104861)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210510195107467.png)]$

7.选择vue版本，选择vue3.0版本

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3FuapmcM-1620649104863)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210510195142603.png)]$

8.然后的选项
在这里插入图片描述

上面这副图的选项是让你选择ESLint和哪一种代码规范一起使用。我们选择第四种-Prettier

在这里插入图片描述

这副图指选择何时检测代码，我们选择第一个–保存时检测
在这里插入图片描述

第一个选项是指在专门的配置文件中存放配置信息。第二个选项是把配置信息放到package.json文件中。此处选择第二个选项

在这里插入图片描述

这是询问是否保存本次配置，保存的配置可以供以后项目使用，而不需要重新配置。就如我创建项目时的第一个选项那样。接下来就是给本次配置取名-test。

回车之后就可以等他把文件下载完成即可。如下图

在这里插入图片描述

9.项目运行

进入项目路径，然后输入
在这里插入图片描述

npm run serve

然后即可看到下图，证明项目创建成功
在这里插入图片描述
10.打开浏览器：输入localhost:8080,即可看见如下页面

11.vue create 命令详解

vue create --help
用法：create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目


选项：

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

12.项目关闭

直接按CTRL+C即可关闭项目

13.使用图形界面

在命令提示符窗口输入vue ui，则会在浏览器窗口中打开vue项目的图形界面管理程序。作用：

创建新项目
管理项目
配置插件和项目依赖
对项目进行基础配置
执行任务

在这里插入图片描述

都看到最后了，点个赞再走呗

龙怪神

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue3.0，Vue/Cli脚手架4.0的创建

1.由于vue/cli的需要node.js8.9及更高版本，若您使用的vue/cli版本太低，请你重新下载最新版本npm uninstall vue-cli -g #该命令是卸载当前vue/cli版本或者可以升级当前的vue/clinpm update -g @vue/cli2.使用Vscode，打开新的终端，进入要项目存放的目录,首先执行以下几个命令npm install -g @vue/cli vue -vsersion #查看vue版本3.环境搭建成功后，即可创建项目，在想要存
复制链接

扫一扫