【Vue】自定义cli模板

最新推荐文章于 2022-03-09 09:23:36 发布
最新推荐文章于 2022-03-09 09:23:36 发布
阅读量207 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39415598/article/details/93545780
版权
7275569-a7f7dce649ad380b.png
微信订阅号：Rabbit_svip



在创建vue模板的时候，可以自定义所需模块。
还可以把常用模块的选项保存好，以便下次创建新模板的时候能直接使用。

本节目录

  1. 创建项目，保存模板选项
  2. 删除模板选项



1、创建项目

详情可以查看【Vue-cli 3.x】创建vue项目

以下创建操作Windows和Mac一样。


7275569-45160a0c7ed9f81e.png
微信订阅号：Rabbit_svip



按下回车，进入下一步

7275569-fe6a9983a2e1c8aa.png
微信订阅号：Rabbit_svip


可以看到，这里有两个选项
default是默认选项，里面包含babel和eslint
Manually select features是自定义。

这里需要选择第二项。


7275569-5ef673f8f9c6bee3.png
微信订阅号：Rabbit_svip


按上下尖头，指向所需要的模块，按下空格键选中（前面有个绿色点代表选中）

选完之后，按下回车键。然后一路根据所需进行配置。

7275569-6e03227084784143.png
微信订阅号：Rabbit_svip


直到出现红框所示内容，输入“y”。


7275569-cb9d1b0fbf69dcad.png
微信订阅号：Rabbit_svip


这样就把模板保存好了。
下次需要创建项目的时候就能直接选择上次使用过的模板选项了。

7275569-612ae286efcc6d7f.png
微信订阅号：Rabbit_svip




2、删除模板选项

Windows版

这里保存过一个模板名为：router-demo。

7275569-c45de145dc766574.png
微信订阅号：Rabbit_svip


首先找到保存模板信息的文件（.vuerc)。
C:\Users\Administrator

在这个路径下，可以看到一个叫：.vuerc 的文件。
.vuerc是一个隐藏文件，不知道怎么查看隐藏文件的请自行百度。

用编辑器打开它。

7275569-3ba5e209f5a827b3.png
微信订阅号：Rabbit_svip
7275569-4507562777679f87.png
微信订阅号：Rabbit_svip


要删除这个模板，把里面的内容全部删掉，最后留下一对花括号就行了（记得保存）。

7275569-0f5eb5d5dd3a20f5.png
微信订阅号：Rabbit_svip


当再次创建项目的时候，之前保存的模板就没了。

7275569-4a2d961c6376f858.png
微信订阅号：Rabbit_svip




Mac版

首先在“偏好设置”里面把当前用户的文件夹显示出来。

7275569-c608d2e705282313.png
微信订阅号：Rabbit_svip
7275569-7f2d8e47ff754b99.png
微信订阅号：Rabbit_svip


然后根据下图说明操作就能找到 .vuerc文件。
在Mac上要显示默认文件，需要按快捷键：command + shift + .

7275569-69e528c4cebd9a18.png
微信订阅号：Rabbit_svip
7275569-3654d7559ccd7f48.png
微信订阅号：Rabbit_svip


剩下的操作和Windows版相同。

德育处主任Pro
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
拷贝自vue官方webpack可供vuecli使用的一个自定义模板
08-10
拷贝自vue官方webpack，可供vue-cli使用的一个自定义模板
vue自定义模板vue自定义模板
03-18
Vue.js 是一款非常流行的前端框架，它以组件化开发、易用性和高性能著称...在文件名为`myTemplate`的压缩包中，可能包含了实现这一功能的Vue组件源码，通过查看和学习这些代码，可以深入理解Vue自定义模板的实现细节。
vue-cli 自定义模板
qq_27762267的博客
03-22 1782
先来看下自定义后的效果吧 这是生成后的目录结构 在使用vue-cli的过程中，常用的webpack模板只为我们提供最基础的内容，但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来，这样就造成挺大的不方便，如果是作为一个团队，那么维护一个通用的模板，我认为是挺有必要的。 下面说下怎么自定义自己的vue-cli模板 first: 从github上下载一个自己的模板 从...
如何自定义自己的vue-cli模板
weixin_34161083的博客
11-16 402
自定义自己的vue-cli模板在使用vue-cli的过程中，常用的webpack模板只为我们提供最基础的内容，但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来，这样就造成挺大的不方便，如果是作为一个团队，那么维护一个通用的模板，我认为是挺有必要的。例如下面是我常用构建项目的目录。 src ├─api //接口 ├─assets //图片 ├─components //公用组件 ├...
自定义vue-cli生成项目模板配置（1）
weixin_30868855的博客
07-24 351
最近在读《变量》，目前得到的认知之一：慢变量才是决定事物长期发展的因素。 打算自定义vue-cli的脚手架或者根据自己的需要设置项目模板的相关参数，很大程度与慢变量这个概念相关。 当然，我还有一个想法或者认知：我的技术方向不是成为技术大神，而是成为快速开发app的高手，准确的说是高效开发App的高手，这里的App首先是WebApp。 要想实现这个目标需要有属于自己开...
搭建自己的cli模板
xiaoshunshi的博客
03-09 856
手把手搭建自己的cli
基于vue-cli 的 Element UI 的后台系统模板
02-21
总之，"基于vue-cli 的 Element UI 的后台系统模板"是一个高效开发后台应用的良好起点，利用 Vue CLI 的便利性和 Element UI 的强大组件，开发者可以快速构建出功能完备、视觉美观的后台管理系统。同时，项目中还...
基于 vue-cli3 搭建的前端H5模板
02-22
本项目是一个基于 Vue CLI 3 搭建的前端H5模板，适用于快速构建响应式、高性能的移动网页应用。 在开始详细解释之前，我们先了解下Vue CLI 3 的核心特性： 1. **快速初始化**：Vue CLI 3 提供了一个全局安装的...
vue-cli的工程模板与构建工具详解
10-17
本文将深入解析vue-cli中的工程模板和构建工具。 首先，vue-cli提供了两种主要的模板：webpack-simple和webpack。两者都基于Webpack，但配置和功能有所不同。 1. **webpack-simple模板**： 这个模板是最基础的，...
vue-cli的开发模板
01-29
在"vue-cli的开发模板"中，我们可以深入理解Vue.js的开发流程和最佳实践。 首先，Vue CLI 使用的是基于Node.js的命令行工具，通过`npm install -g @vue/cli`全局安装后，我们可以在命令行中使用`vue`命令。这个工具...
Vue-Template-Cli:vue-cli preset 自定义模板
04-19
团队通用 Web 模板 使用方法 需先下载 vue-cli 4.0 及以上版本 然后执行 vue create --preset lihui-gh/Vue-Template-Cli my-project（项目名） 第一次使用可能会询问是否使用 taobao 镜像，选择是（Y）即可 生成模板过程中会提示选择 顶部导航栏的模板 还是 侧边导航栏的模板，按你的需求选择即可（输入 1 或者 2） 随后等待项目自动下载依赖，下载完成后就可进入项目内执行 npm run serve 运行项目
Vue-Cli 自定义指令
一路向前的博客
08-28 1452
使用Vue框架开发的同胞们在非常愉快的使用vue内置指令的同时，有时候因为业务的原因，难免想动一动DOM的底层，这时候，vue为我们提供了自定义指令的权利。那么自定义指令，当然得区分时局部定义还是全局定义(比如我们需要定义一个元素获取焦点时的指令)： 局部定义指令：局部定义需要在单文件组件中的dirctives中进行 directives: { focus: { /**在绑定元素插入DOM中定义 */ inserted(e) { e.focus()
（十四）使用 vue-cli 创建模板项目
u013109501的博客
03-05 373
1.说明 1) vue-cli 是 vue 官方提供的脚手架工具 2) github: https://github.com/vuejs/vue-cli 3) 作用: 从 https://github.com/vuejs-templates 下载模板项目 2.创建 vue 项目 npm install -g vue-cli （安装vue-cli） vue init webpack vue_demo （创建项目） cd vue_demo（进入项目目录） npm insta.
node.js -自定义cli工具
weixin_43273755的博客
08-04 308
自定义cli 工具 参照vue-cli的思路，将项目模板独立发布到git上，然后通过脚手架工具下载下来，经过与脚手架的问答式交互获取新项目的信息，并将交互的输入作为元信息渲染项目模板，最终得到项目的基础结构。然后自动为项目生成依赖，并启动项目。 步骤： 创建项目 mkdir vue-auto-lfj cd vue-auto-lfj npm init -y npm i commander download-git-repo ora handlebars figlet clear chalk open inqu
node搭建自定义cli
jsqiang
11-28 895
自定义cli 搭建 本文介绍简单的nodecli的搭建，可以通过简单的cli我们去延伸多功能，深度的自定义cli的搭建，搭建的同时我们还可以去掌握node一些常见的插件和api，这篇文章主要介绍 自动化路由的搭建（简单的路由）。 搭建cli 1.下载需要用到的npm包 npm i chalk clear commander download-git-reop figlet handlebars open ora watch util -D 插件的解释： chalk 用于控制台的颜色 clear 清空控制
npm cli commands - npm指令大全
zmrdlb的专栏
11-18 2792
npm access: 设置已发布的包的访问级别 npm access public [] npm access restricted [] npm access grant [] npm access revoke [] npm access ls-packages [||] npm access ls-collaborators [ []] n
②Vue 使用vue-cli创建模板项目、组件化编码流程简述
一个努力学习的程序猿
05-01 780
Vue 本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷
仿vue-cli最全易懂脚手架cli、自定义cli实现
岁月如歌，江山如画
07-04 439
self_cli_520最全易懂脚手架cli实现 该脚手架基于commander、download-git-repo等npm实现自定义脚手架。 主要涉及的依赖 commander 命令行解析 download-git-repo 下载项目 ora 加载loading chalk 文本样式 inquirer 获取命令行交互 handleBars 编译文件包 视频了解 初识self_cli_520脚手架 | 脚手架涉及到的包说明 | 编写脚手架 实现功能（命令） self_cli_52
vue制作可拖动的div（超级简单）
泥鸽鸽的博客
10-25 7542
一下方法也是我百度的 但是筛选了好几个 发现这个最简单 只要两步： 1.在单文件组件中将这个自定义指令复制进去 2.在需要的div 写上这个指令即可 // 自定义指令 实现可拖动 directives: { drag(el, bindings) { el.onmousedown = function(e) { var disx = e.pageX - el.offsetLeft var disy = e.pageY - el.offsetTop
vue-cli怎么使用自定义组件
最新发布
07-28
使用Vue CLI创建的Vue项目，可以很方便地使用自定义组件。下面是一个简单的步骤指南： 1. 首先，确保你已经安装了Vue CLI。如果没有安装，可以使用以下命令进行全局安装： ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目。打开命令行终端，进入你想要创建项目的目录，并执行以下命令： ``` vue create my-project ``` 这将创建一个名为"my-project"的新Vue项目。 3. 进入项目目录： ``` cd my-project ``` 4. 在项目中创建你的自定义组件。你可以在`src/components`目录下创建一个新的组件文件，例如`MyComponent.vue`。 5. 在创建的组件文件中，编写你的组件代码。例如，在`MyComponent.vue`中可以写入以下示例代码： ```vue <template> <div> <h1>{{ message }}</h1> <button @click="updateMessage">Update Message</button> </div> </template> <script> export default { data() { return { message: 'Hello, Vue!', }; }, methods: { updateMessage() { this.message = 'Updated Message'; }, }, }; </script> <style scoped> /* 样式 */ </style> ``` 6. 在使用该组件的地方，例如在`App.vue`中，可以通过引入组件并在模板中使用它。例如，在`App.vue`中可以写入以下示例代码： ```vue <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from './components/MyComponent.vue'; export default { components: { MyComponent, }, }; </script> <style scoped> /* 样式 */ </style> ``` 7. 运行项目： ``` npm run serve ``` 这将启动开发服务器，并在浏览器中显示你的Vue应用。你将能够看到使用自定义组件的效果。 注意：确保在使用自定义组件时，遵循Vue的组件命名规范。例如，组件名必须是驼峰式命名，且在模板中使用时需要使用短横线分隔。例如，如果你的组件名是`MyComponent`，在模板中使用时应该是`<my-component></my-component>`。 希望这能帮助到你！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值