IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【LazyCatMusic-CreateProject】用Vue CLI创建Vue3项目骨架 -> 正文阅读

[JavaScript知识库]【LazyCatMusic-CreateProject】用Vue CLI创建Vue3项目骨架

用Vue CLI创建Vue3项目骨架

起笔:2021年11月18日19:33:35

我使用的是 Vue CLI@4.5.13 创建的项目,采用Vue3.0。

PS F:\Prac_Web\VueTraining> vue -V
@vue/cli 4.5.13

1、创建项目的命令

首先在某个目录下(比如是:F:\Prac_Web\VueTraining)打开命令行窗口。我用的是Windows下的 PowerShell,按住shift键在该目录下右击鼠标就能看到【在此处打开 PowerShell 窗口】的选项。

在命令行窗口中输入vue create 命令并敲下回车:

PS F:\Prac_Web\VueTraining> vue create lazy-cat-music

其中 lazy-cat-music 是项目的名称(这个由开发者自己决定),之后,项目创建完成时,就会在F:\Prac_Web\VueTraining 这个目录下多出一个 lazy-cat-music 目录。

2、选择预设环境

上面敲下回车后,等待一会儿,就会出现如下提示:

Vue CLI v4.5.13
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.13 → 4.5.15   │
│     Run npm i -g @vue/cli to update!      │
│                                           │
└───────────────────────────────────────────┘

? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

image-20211118195849103

注意上面的选项中,前面有 > 标识的就是当前选择的选项。为了演示后面的一些选项,我选择了第三个选项来手动配置。

img-vUoer2Ju-1638092093264

? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

注意上面我选择配置项,这将关系到后面将进行哪些配置工作。

3、根据上面选择的预设环境进行相应配置

选择Vue的版本:

image-20211118201206096

选择路由模式:

img-uz9BxaFF-1638092093278

选择CSS预处理器:

image-20211118201543201

ESLint选择哪个标准:

image-20211118201704697

选择代码检查的时机:

image-20211118201849240

选择把项目配置文件放在哪里:

image-20211118202152921

建议放在不同的文件里,这样更好维护,也更方便找。

image-20211118202558485

选择是否保存自定义配置:

img-tkQaEth6-1638092093327

给自己的配置取名字以供复用:

我上述配置取名为 firstConfig

image-20211118203238771

当你下次使用 Vue CLI 创建项目时就可以使用刚才保存的自定义配置了:

image-20211118204030722

如果想要删除上面的自定义配置的话,需要到 C:\Users\{你的用户名} 这个目录下找到 .vuerc 这个文件,用任意纯文本编辑器打开,找到你刚才设置的那个配置名,比如我上面设置的就是 firstConfig,然后对应的部分删除即可:

image-20211118204457795

更新:2021年11月18日20:29:35

参考:如何删除vue-cli保存的自定义项目配置_w731030162的博客-CSDN博客

等待初始化完成并按提示启动项目:

然后就等待下载相应的包并完成初始化即可:

image-20211118203341651

等项目初始化完成后就可以按提示运行项目:

image-20211118204706823

在VSCode中打开生成的项目,可以看到最终的项目结构:

image-20211118205409954

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-29 16:13:51  更:2021-11-29 16:14:02 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/21 3:13:40-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码