[Vue]vue cli (脚手架)(项目的创建与分析)(一)

简介: [Vue]vue cli (脚手架)(项目的创建与分析)

前言

系列文章目录:

[Vue]目录

老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版: https://note.youdao.com/s/5vP46EPC

视频:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

1. Vue 脚手架(CLI)

Vue 脚手架(CLI)是 Vue 官方提供的标准化开发工具(开发平台)

Vue 脚手架(CLI)官网

vue cli的特点:

  1. 开箱即用
  2. 基于 webpack
  3. 功能丰富且易于扩展
  4. 支持创建 vue2 和 vue3 的项目

2. Vue CLI 的安装

vue-cli 是基于 Node.js 开发出来的工具,因此需要使用 npm 将它安装为全局可用的工具。

2.1 全局安装 Vue CLI

如果出现下载缓慢可以将下载地址配置为淘宝镜像:

npm config set registry https://registry.npm.taobao.org
npm i -g @vue/cli

2.2 检验是否安装成功

查看 Vue CLI 的版本,检验 Vue CLI 是否安装成功.

vue --version

或者

vue -V

能查看安装的 Vue CLI 的版本,即为安装成功。

3. 使用 Vue CLI 创建项目

Vue CLI 提供了创建项目的两种方式:

  1. 基于命令行的方式创建 vue 项目
vue create 项目名称
  1. 基于可视化面板创建 vue 项目
vue ui

3.1 基于命令行的方式创建 vue 项目

基于命令行的方式创建 vue 项目,可以使用 Vue CLI 提供的默认预设,也可以自己手动进行预设的配置。

如果之前有自己手动进行预设的配置,并且将配置的预设进行保存,也可以选择直接使用之前的预设配置。

3.1.1 使用 Vue CLI 提供的默认预设创建 vue2 项目

vue create vue_my_test1

键盘上下箭头按键进行选择,enter确定选择

进入创建的项目的目录

cd vue_my_test1

运行项目

npm run serve

访问项目页面

http://localhost:8080/

3.1.2 手动配置预设创建 vue2 项目

步骤1:在终端下运行 vue create 命令

vue create vue_my_test2

步骤2:选择要安装的功能

步骤3:选择 vue 的版本

由于选择安装的功能不同,接下来的选择个数会有所不同

步骤5:使用上下箭头选择如何存储插件的配置信息

通常选择把插件的配置信息存储到单独的文件

步骤6:是否将刚才的配置保存为预设

根据需要选择是否保存

项目创建完成

相关文章
|
4天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
4天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
4天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
10天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
9天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
9天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
JavaScript 前端开发 Java
Vue CLI 脚手架
🍅程序员小王的博客:程序员小王的博客 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 🍅 如有编辑错误联系作者,如果有比较好的文章欢迎分享给我,我会取其精华去其糟粕 🍅java自学的学习路线:java自学的学习路线
228 0
Vue CLI 脚手架
|
Web App开发 JavaScript 前端开发
【Vue五分钟】 Vue Cli脚手架安装配置
这个脚手架是一个基于Vue快速进行的开发的完成系统;是基于webpack构建开发的,带有合理的配置,可以通过项目的文件进行配置。
【Vue五分钟】 Vue Cli脚手架安装配置
|
缓存 资源调度 JavaScript
Vue——安装@vue/cli(Vue脚手架)的三种方式
安装@vue/cli(Vue脚手架)的三种方式
217 0
|
JavaScript 测试技术 开发工具
Vue CLI脚手架
Vue CLI脚手架
317 0
Vue CLI脚手架
下一篇
无影云桌面