草庐IT

vue全家桶进阶之路22:Vue CLI脚手架

城南 2023-04-11 原文

Vue CLI 是一个基于 Vue.js 的官方脚手架工具,它可以帮助我们快速创建和管理 Vue.js 项目,提供了一些工具和配置来帮助我们开发和调试 Vue.js 应用。一切框架都是为了将开发变得简单、快捷、易操作,Vue CLI脚手架也不例外,它出自vue官方,脚手架的用意就是让开发变得像搭建房子那样标准而又有规划,它集成了很多常用的模块,更像是一个工具箱(插件集合),很多常用的配置文件或者文件夹也直接就有了。

Vue CLI 提供了很多常用的功能和配置,例如:

  1. 通过命令行快速创建一个新的 Vue.js 项目,并且可以选择不同的模板和配置。
  2. 集成了 webpack 和 webpack-dev-server,可以自动进行打包和热更新。
  3. 支持通过插件和配置文件来扩展和定制项目的构建和开发流程。
  4. 集成了 ESLint 和 Prettier,可以帮助我们保持代码风格的一致性。
  5. 支持通过配置不同的环境变量来进行项目的打包和部署。

使用 Vue CLI 可以让我们更加高效地开发和维护 Vue.js 项目,特别是在团队协作和项目规模较大时,它能够帮助我们统一项目结构和配置,避免重复的工作,提高开发效率。

安装 Vue CLI 可以通过 npm 来进行安装: 

npm install -g @vue/cli

安装完成后,就可以通过以下命令来创建一个新的 Vue.js 项目:

vue create my-project

接下来就可以根据命令行提示来选择不同的配置和模板了,然后就可以开始愉快地开发了。

 vue cli脚手架创建过程:

1、现在在自己电脑 上创建一个目录,然后cmd进入

 

 

2、创建项目

vue create vue-cli-demo1

3、默认vue2版本和默认vue3版本都是有Eslint和Babel的,Eslint是代码规范的,Babel是将ES6转化为ES5的。(这边新手不建议安装有Eslint的,所以选择自主配置--最后一种)

4、按上下方向键选中项目,按 space 键来进行是否选择,建议勾选的)

Babel:es6 转 es5
Router:路由
Vuex:数据容器,存储共享数据
CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus 等
Linter / Formatter:代码格式校验(一般情况下默认勾选了,记得取消)

 

 5、选择vue版本--目前选择2版本,较稳定。

 

 6、是否选择旧路由模式,(这里选择“N”)

 

7、 选择css预处理器,一般选择Less

 

 

8、Babel、ESLint 等工具会有一些额外的配置文件,这里的意思是问你将这些工具相关的配置文件写到哪里:

In dedicated config files:分别保存到单独的配置文件
In package.json:保存到 package.json 文件中
这里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置。
 

 

 9、是否将刚才的选择保存起来,下次可以直接用,一般选择N,可以根据自己需要选择。

 

 10、完成

 11、进入项目目录

 

 12、运行项目

yarn serve

 

 

npm run serve

 

 

 

 

 

 

在Vue CLI生成的项目中,有许多不同的文件和目录,每个文件和目录都有不同的作用。下面是一些常见文件和目录的简要说明:

  • node_modules/: 该目录包含了所有的npm包和依赖。
  • public/: 该目录包含了所有静态资源文件,如图像、字体和favicon.ico文件。
  • src/: 该目录包含了应用的所有源代码。
    • assets/: 该目录包含了应用中的静态资源,如样式、图像和字体。
    • components/: 该目录包含了所有的Vue组件。
    • router/: 该目录包含了Vue Router的配置文件。
    • store/: 该目录包含了Vuex的状态管理器。
    • views/: 该目录包含了所有的页面视图。
    • App.vue: 根组件,所有其他组件都嵌套在这里。
    • main.js: 应用的入口点。
  • .gitignore: 该文件告诉git哪些文件和目录不应被纳入版本控制。
  • babel.config.js: Babel的配置文件。
  • package.json: 该文件包含了所有的依赖和应用的元数据。
  • README.md: 该文件包含了应用的文档和说明。
  • vue.config.js: 该文件包含了Vue CLI的配置,如代理设置、Webpack配置和输出目录等。

以上仅是常见文件和目录的说明,根据具体的项目需求和使用场景,可能会有所不同。

public文件夹是用于存放公共的静态资源,这些资源不会被webpack打包处理,而是直接复制到打包后的文件夹中。比如说,你可以在public文件夹中放置一些通用的HTML页面、图片等。

而assets文件夹是用于存放被webpack处理的资源,包括样式文件、JavaScript文件、图片等。这些资源会被webpack打包,并且会生成对应的打包文件。比如说,你可以在assets文件夹中放置一些自定义的CSS文件或JS文件。

在实际开发中,通常将公共的资源放在public文件夹中,而将开发中需要处理的资源放在assets文件夹中,以方便打包和管理。

有关vue全家桶进阶之路22:Vue CLI脚手架的更多相关文章

  1. ruby-on-rails - 如何在 Rails 3 中创建自定义脚手架生成器? - 2

    有这些railscast。http://railscasts.com/episodes/218-making-generators-in-rails-3有了这个,你就会知道如何创建样式表和脚手架生成器。http://railscasts.com/episodes/216-generators-in-rails-3通过这个,您可以了解如何添加一些文件来修改脚手架View。我想把两者结合起来。我想创建一个生成器,它也可以创建脚手架View。有点像RyanBates漂亮的生成器或web_app_themegem(https://github.com/pilu/web-app-theme)。我

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  4. ruby-on-rails - 如何在 Rails 脚手架生成器上强制使用单数表名? - 2

    我正在使用遗留数据库并需要创建一些CRUD。我如何使用scaffold生成器并告诉他表的确切名称以避免复数化过程?表格也是西类牙语。 最佳答案 您可以只使用ActiveRecord::Base.table_name=方法手动设置表名。因此,在您的模型中您可以:classOrderDetail 关于ruby-on-rails-如何在Rails脚手架生成器上强制使用单数表名?,我们在StackOverflow上找到一个类似的问题: https://stackove

  5. 焕新古文化传承之路,AI为古彝文识别赋能 - 2

    目录1古彝文与古典保护2古文识别的挑战2.1西文与汉文OCR2.2古彝文识别难点3合合信息:古彝文保护新思路3.1图像矫正3.2图像增强3.3语义理解3.4工程技巧4总结1古彝文与古典保护彝文指的是云南、贵州、四川等地的彝族人使用的文字,区别于现代意义上的彝文,古彝文指的是在民间流通使用的原生态彝文,多达87046字。古彝文的起源距今至少数千年,是世界上最古老的文字之一。对古彝文字集研究有助于理解尚未被翻译成汉文、用字尚未规范化的古籍,更深层、透彻地作用于传统文化保护。古彝文字义对照图(网络资料+邵文苑供图)古籍是不可再生的宝贵资源,应当得到妥善保护。中国的古籍在历史上迭经水火兵燹等自然灾害、

  6. vue 实现内容超出两行显示展开更多功能,可依据需求自定义任意行数! - 2

    平时开发中我们经常会遇到这样的需求,在一个不限高度的盒子中会有很多内容,如果全部显示用户体验会非常不好,所以可以先折叠起来,当内容达到一定高度时,显示展开更多按钮,点击即可显示全部内容,先来看看效果图: 这样做用户体验瞬间得到提升,接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计,这里就不贴了,主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  7. ruby-on-rails - Ruby On Rails 脚手架需要包含外键吗? - 2

    我正在学习ruby​​onrails的基础知识,我想做一些简单的查询,但我有疑问:我将拥有这些模型:classClient现在,我将使用脚手架来生成所有的东西,我想知道我是否必须直接将外键放在脚手架中,例如:rails生成脚手架地址street:stringnumber:integerclient_id:integer或者当我建立这些关联然后迁移我的数据库时,它们将是隐式的?我不知道我是否以最好的方式解释了自己。谢谢 最佳答案 是的,没有引用。您需要传递client_id或对Client模型的引用,例如:railsgenerates

  8. ruby-on-rails - "cafe"的 Rails 脚手架多元化不正确 - 2

    我想创建一个cafe和一个caveController。当我尝试通过命令使用rails脚手架创建我的cafe时railsgscaffoldcafename:string它将“cafe”的复数形式派生为“caves”,这意味着我无法制作我的cavesController,因为该名称已被使用。如何使Rails使用正确的复数形式? 最佳答案 您可以创建自己的变形。将此添加到您的config/initializers/inflections.rbActiveSupport::Inflector.inflectionsdo|inflect|i

  9. vue3.0 + vite2.0+如何兼容低版本浏览器 - 2

    这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一:vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二:安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三:

  10. Vue3的新特性 - 2

    Vue3的新特性包括:CompositionAPI:一种新的API风格,可将有关组件功能的代码逻辑封装在单独的函数中,从而更好地管理和重用代码。Teleport:可以让组件在DOM层次结构中的任何位置渲染。Suspense:一种新的异步渲染模式,可以优化应用程序的性能。更快的渲染速度:Vue3使用了新的虚拟DOM算法,并且对渲染过程进行了优化,因此在渲染大型应用时性能更高。更小的包大小:Vue3的打包大小比Vue2更小,因为它不再需要依赖像vue-template-compiler这样的工具。其他改进:Vue3还具有其他一些改进,例如更好的TypeScript支持、更好的错误提示和更好的调试工

随机推荐