Vue-cli 脚手架的创建

已于 2023-02-18 22:47:29 修改
阅读量465 收藏 2
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2022-11-02 20:35:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54673484/article/details/127643756
版权

1. 下载并安装Node.js

安装教程链接

Node.js下载安装与配置(windows)_pingcode的博客-CSDN博客_node下载配置

相关命令

# 查看node版本号
node -v
# 查看npm版本号
npm -v

# 设置前缀路径
npm config set prefix "Node.js安装路径\node_global"        # 设置自己的存储路径
# 设置缓存路径
npm config set cache "Node.js安装路径\node_cache"       # 设置自己的缓存路径

# 查看全局模块存储路径  
npm root -g        # 查看存储路径是否设置成功
# 查看缓存路径
npm config get cache         # 查看缓存路径是否设置成功

换源

npm config set registry https://registry.npm.taobao.org   # 换成淘宝镜像(下载更快)

npm config get registry # 查看是否换镜像成功

2. 安装Vue-Cli

相关命令

cli3/cli4:

npm  install @vue/cli -g        # 全局安装不指定版本号默认最新版cli4

npm install @vue/cli@3.2.1 -g        # 指定版本号为cli3

vue --version        # 查看版本号

npm uninstall @vue/cli@版本号 -g        # cli3/cli4全局卸载

cli2:

npm install vue-cli -g

npm uninstall vue-cli -g

Vie-Cli和vue的关系

  • Vue CLI是一个脚手架，通俗点说就是代码生成器，可以快速生成一套基于Vue完整的前端框架，单独编译，单独部署。可以再集成各种第三方插件，扩展出更多的功能。
  • Vue是渐近式框架，你可以用它一个功能，也可以用全家桶。比如你可以在老的jsp或thymeleaf项目里，引入vue.js，只用它核心的数据绑定功能。
  • Vue CLI相当于一个集成好的管理依赖和插件的框架，你可以在这个框架里引入vue2或vue3以及其它依赖或插件，只不过Vue CLI对有些使用版本有限制依赖版本不是随意的。
  • Vue CLI 4.5以下，对应的是Vue2。
    Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2。

3. Vue项目创建

Vue-cli3使用Vue-cli2搭建项目

安装了vuecli3还想使用vuecli2创建项目无需卸载cli3直接安装:npm install -g @vue/cli-init 就可以创建cli2的项目了

可能错误处理

出现该错误的原因是管理权限不够。

方法一：到控制台用管理员身份运行命令行（不够方便，vscode 下的命令行默认也不是管理员身份运行的）

方法二：直接修改node_global和node_cache文件夹的权限：

 给其他用户添加写或其他必要权限即可

最后控制台切换到vueclitest项目目录，npm run dev运行

Vue-cli3搭建项目

vue 使用cli3搭建vue2.0项目 - yangchin9 - 博客园 (cnblogs.com)

vue create 项目名        # vue-cli3默认会在项目下创建git

1.创建，选择手动配置项

 2、配置选择（A全选，空格键-选中/取消）

           Babel  -------------------------------  babel转码器把ES6转码为ES5
　　　TypeScript -------------------------  TypeScript
　　　Progressive Web App (PWA) Support PWA ------ PWA渐进式增强WEB应用
　　　Router ------------------------------ 路由
　　　Vuex -------------------------------- 状态管理工具 
　　　CSS Pre-processors ---------------- CSS 预处理器
　　　Linter / Formatter ------------------- 支持代码风格检查和格式化
　　　Unit Testing -------------------------- 单元测试
　　　E2E Testing -------------------------- E2E 测试

询问 路由是否使用 history 模式? 我选择是

询问 使用哪种css预处理器？我选择 第二个

询问 是否把各个配置使用单独文件存放，还是放在package.json中？ 我选择放在package.json里面

询问 是否把本次选择的配置保存，以供下次使用？我就暂且不保存了

切换到demo路径中然后运行项目

运行结果

 4. vue-cli项目目录介绍

vue cli2 项目的目录结构_积极向上的十六的博客-CSDN博客_vuecli2项目结构

1.build——[webpack配置]

  • build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。

2.config——[vue项目配置]

  • config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等

3. npm install和npm run dev/server和npm run builde

  • 当我们执行npm install其实就是执行dependencies的过程，也就是下载依赖，生成一个node-moudel的文件夹，里面放置的是对应引入的插件。
  • 当我们使用vue-cli脚手架完成一个项目的时候，下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢，我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来，但是现在我们要把他放到服务器上的话用npm run build命令就可以啦。

4. Babel和css预处理器

  • 在vue中，Babel是一个JavaScript编译器，主要用于将采用ECMAScript 2015+语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

  • “CSS 预处理器用一种专门的，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处

5. 项目依赖下载

使用命令 --save 或者说不写命令 --save  ,都会把信息记录到 dependencies 中；

dependencies 中记录的都是项目在运行时需要的文件；

使用命令 --save-dev 则会把信息记录到 devDependencies  中；

devDependencies 中记录的是项目在开发过程中需要使用的一些文件，在项目最终运行时是不需要的；

也就是说我们开发完成后，最终的项目中是不需要这些文件的；

//安装路由命令
npm install vue-router

默兮颜
关注
专栏目录
使用Vue脚手架（Vue cli）构建Vue项目
fakerking的博客
08-14 281
Vue脚手架
Vue-cli（脚手架）的创建
计算机硕士的博客
04-26 3157
Vue-cli（脚手架）的创建。
Vue3 学习全攻略保姆式教程
最新发布
qq_22232065的博客
07-11 1928
Vue3 的发布背景主要源于 Vue2 在开发过程中逐渐暴露的一些问题。随着业务功能的快速增长，复杂组件的代码维护难度加大，缺乏高效的逻辑复用机制，类型推断不够友好，且由于使用 Webpack 导致的打包时间较长。性能大幅提升：通过重写虚拟 DOM 、优化 Diff 算法、静态提升、事件监听缓存等手段，使应用的渲染和更新速度更快。更小的体积：移除不常用的 API ，引入 Tree Shaking 机制，只打包实际使用的模块，减少了应用的体积。
vuecli脚手架的搭建
IT12345666的博客
05-20 619
安装nodejs 并搭建环境 去nodejs的官网进行下载 和jdk的环境配置一样： 打开电脑高级系统管理： 配置新建 NODEHOME 刚才拷贝的路径 并在path里面添加 %NODEHOME%\bin 打开cmd 输入 npm -version 出现这个 就证明node 环境变量配置成功了！ 安装vue项目 请严格按照步骤来 避免踩坑：搭建完环境变量之后 在全局中进行安装依赖： 前面请在桌面上直接打开cmd进行安装： 首先进行nodejs的初始化 npm init -y 在您的计
Vue-Cli - Vue 脚手架的创建 以及 目录结构说明
CYK_byte的博客
10-18 2960
f）这个问你是否进行单词校验，校验出错会有红色波浪线. 这里不需要，因为你可能会写很多特殊字符，因此输入 n 回车即可.之后他就会去构建项目了，如果此时出现了如下错误，说明你权限不够，要使用管理员的方式打开命令行，再执行上述步骤.b）接下来会问你项目描述是否叫（默认）："A Vue.js project". 如果不想改，直接回车即可.d）接下来会问你，是否采用运行 + 编译的方式，实际上就是是否要热部署的意思，直接回车即可.h）接下来问你是否要使用 npm 来管理项目，这个肯定是需要的，直接回车即可.
vue/cli 创建脚手架
ZDM_9999的博客
11-17 131
vue 创建项目
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
01-19
用vue-cli构建了项目之后在webstorm开发，用npm run dev跑本地服务，...以上这篇浅谈VUE-CLI脚手架热更新太慢的原因和解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue使用vue-cli快速创建工程
01-19
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 -g代表全局安装。 i就是install的缩写。 其中webpack-simple代表模板的名称。vue-todos是你给自己的项目起的名称，这个随便起...
webstorm建立vue-cli脚手架的傻瓜式教程
01-18
2、点击 create 后出现以下选项，按键盘上下键选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动 3、选择配置，这时你会...
详解如何使用vue-cli脚手架搭建Vue.js项目
10-19
- 使用vue-cli脚手架创建的项目已经包含了热加载、代码检查、单元测试和CSS分离等现代Web开发所需的功能。 - Vue.js项目的目录结构是预设好的，这包括源码、资源、构建配置等不同部分的文件夹。 - 在进行项目开发时...
创建Vue-Cli脚手架
weixin_42298679的博客
04-03 1016
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
搭建vue-cli脚手架
weixin_47586598的博客
06-06 72
搭建vue-cli脚手架
搭建Vue-Cli脚手架（超详细）
2401_84091628的博客
04-17 1017
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
Vue CLI脚手架创建Vue3项目
y393016244的博客
09-19 1685
1、打开命令窗口切换到项目保存目录。 2、选择Vue 3创建。 3、等待创建，提示Successfully created project创建成功。 4、创建好的项目目录。 5、用开发工具idea、vscode等打开hello-vue3项目开发就可以了，按个人喜好我用的是idea。 6、启动成功，发挥创造吧~~~~第一次运行时先初始化安装。 7、yarn命令没有安装的小伙伴可以参考这个。
搭建Vue脚手架（vue-cli）并创建一个项目
热门推荐
kivet 的博客
08-30 7万+
1、 安装nodejs环境 官网下载：https://nodejs.org/en/download/ 一直默认就行，路径可以改变但要记得到 安装完成后cmd，输入 node -v npm -v 如果能看到node和npm的版本号了，说明已经安装成功 注：node版本最好高一点，保险的话直接安装最新版本的，因为vue运行需要基于npm一定的版本（最好是3.x.x以上），版本低了...
快速创建@vue/cli脚手架
sherly_chen的博客
10-28 746
►由于我们用webpack自己配置环境很麻烦，需要下载很多包,因此我们可以下载@vue/cli包,直接用vue命令创建脚手架项目； ►那么创建@vue/cli脚手架的好处是什么呢？ ➜可以0配置webpack；babel支持；css、less支持；开发服务器支持； ►那接下来我们来讲讲脚手架是如何安装的： ➜目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程 步骤一：安装脚手架： 1、全局安装命令： yarn global add @vue/cli # O
创建脚手架vue cli项目
xiaoxiamimm的博客
12-01 111
1.vue init webpack my-project 第4步的时候选择no, 第5步的lint是限制的意思，eslint对es代码进行限制。就是对js代码进行限制，ESLint是一个JavaScript代码静态检查工具. 选择y Standard (https://github.com/standard/standard) 这个是标准的，我们一般选择这个 Airbnb (https://github.com/airbnb/javascript) 这个是爱彼迎公司的标准 none (
Vue-cli 脚手架搭建项目
Yuki_yuhan的博客
02-28 5940
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：1. 通过 @vue/cli 实现的交互式的项目脚手架。2. 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。3. 一个运行时依赖 (@vue/cli-service)，这个依赖：（1）可升级；（2）基于 webpack 构建····4. 一个丰富的官方插集合，集成了前端生态中最好的工具。5. 一套完全图形化的创建和管理 Vue.js 项目的用户界面。快速创建项目：命令行和图形化界面创建
mac使用vue-cli创建脚手架
07-15
### 回答1： 使用vue-cli在Mac上创建脚手架的步骤如下： 首先，确保你的机器已经安装了Node.js和npm。你可以在终端中输入以下命令来检查是否已正确安装： $ node -v $ npm -v 如果没有安装，请先安装Node.js和npm。 安装vue-cli，可以使用以下命令： $ npm install -g @vue/cli 安装完成后，你就可以使用vue命令来创建Vue项目了。进入你要创建项目的文件夹，例如，你的项目名为"my-project"，那么你可以在终端中输入以下命令： $ vue create my-project 然后，会提示你选择一些配置项，如babel、Router、Vuex等等。你可以根据需要进行选择，也可以直接按回车键来选择默认配置。 等待一段时间后，Vue脚手架会自动创建并安装所需的文件和依赖项。安装完成后，进入项目文件夹： $ cd my-project 然后，运行以下命令来启动开发服务器： $ npm run serve 在浏览器中打开 http://localhost:8080 就可以看到项目的欢迎界面了。 接下来，你可以根据自己的需求在src目录下进行开发，并使用Vue的语法和组件来构建应用程序。 需要注意的是，vue-cli提供了很多其他命令和功能，如构建生产版本的项目、进行单元测试等等。你可以在官方文档中查找更多相关信息。 以上就是在Mac上使用vue-cli创建脚手架的简单步骤。希望对你有所帮助！ ### 回答2： 在Mac上使用Vue CLI创建脚手架是一种非常方便和快速的方式，下面我会详细说明步骤。 首先，在你的Mac上确保已经安装了Node.js和npm。你可以在终端中输入`node -v`和`npm -v`来检查是否已经安装。如果没有安装，请先安装这两个软件。 接下来，打开终端，并全局安装Vue CLI。在终端中输入以下命令： ``` npm install -g @vue/cli ``` 这样就完成了Vue CLI的安装。 然后，你可以使用以下命令来创建一个新的Vue项目： ``` vue create 项目名 ``` 在这个命令中，你可以替换“项目名”为你自己的项目名称。执行命令后，Vue CLI会为你创建一个新的项目，并自动安装项目所需的所有依赖。 在项目创建完毕后，你可以使用以下命令进入到项目目录中： ``` cd 项目名 ``` 在进入到项目目录后，你可以使用以下命令来启动项目： ``` npm run serve ``` 这样，你就可以在浏览器中访问`http://localhost:8080`来查看你的Vue项目了。 除了创建项目和启动项目，Vue CLI还提供了其他一些有用的命令来帮助你开发和打包项目。例如，你可以使用以下命令来添加新的Vue组件： ``` vue add 组件名 ``` 总结起来，使用Vue CLI在Mac上创建Vue项目非常简单。只需要几个简单的命令，你就可以快速搭建起一个完整的Vue开发环境，方便你开发和管理Vue项目。 ### 回答3： Mac使用vue-cli创建脚手架非常简单。首先，您需要确保您的Mac上已经安装了Node.js和npm。您可以在终端中运行“node -v”和“npm -v”命令来检查它们的版本。 一旦您确认安装了Node.js和npm，您可以使用以下命令全局安装vue-cli： ``` npm install -g @vue/cli ``` 安装完成后，您可以使用以下命令来创建一个新的Vue项目： ``` vue create 项目名称 ``` 如果您希望使用更详细的配置，可以添加“-p”或“--preset”参数并选择一个预设选项。您可以通过运行以下命令来查看可用的预设选项： ``` vue create --preset ``` 一旦您选择了预设选项并输入了项目名称，vue-cli将会下载并安装项目的所有依赖项。这可能需要一些时间，具体取决于您的网络连接和计算机性能。 完成后，您可以使用以下命令进入项目目录： ``` cd 项目名称 ``` 然后，您可以使用以下命令来启动开发服务器： ``` npm run serve ``` 这将启动一个本地服务器，您可以在浏览器中访问项目。默认情况下，服务器将在“http://localhost:8080”上运行。 这只是使用vue-cli创建脚手架的基本过程。您可以通过编辑项目中的源代码以及添加其他插件和库来进一步定制您的Vue项目。祝您使用vue-cli创建出优秀的Vue项目！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值