Vue:第一个vue-cli程序

最新推荐文章于 2024-09-10 08:58:23 发布
原创 最新推荐文章于 2024-09-10 08:58:23 发布 · 441 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #webpack #javascript

Vue CLI是一个官方提供的项目脚手架，用于快速搭建Vue.js应用。它预设了标准的目录结构和基础代码，简化了开发流程。通过vue init webpack myvue命令可以创建基于webpack模板的项目，然后进行初始化和本地开发。在创建过程中，可以选择是否集成vue-router、ESLint等工具，并在项目创建后手动添加。完成初始化后，运行npm install安装依赖，启动项目则使用npm run dev。

1、什么是vue-cli

  • vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板
  • 预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；

主要的功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

2、需要的环境

3、第一个vue-cli应用程序

1.创建一个Vue项目，随便建立一个空的文件夹在电脑上

F:\work\Workspaces\vue

2.创建一个基于webpack模板的vue应用程序
切记：以管理员身份运行

  • 首先需要进入到对应的目录 cd F:\work\Workspaces\vue
  • 这里的myvue是项目名称，可以根据自己的需求起名
vue init webpack myvue

一路都选择no即可；
说明：

  • Project name：项目名称，默认回车即可
  • Project description：项目描述，默认回车即可
  • Author：项目作者，默认回车即可
  • Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
  • Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
  • Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
  • Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
  • Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

在这里插入图片描述
3.初始化

cd myvue
npm install
  1. 打包 npm run dev
前端开发：项目运行npm install 提示XXX packages are looking for funding run `npm fund` for details的解决方法
全沾软贱开发攻城狮
02-02 4万+
分享一个去年遇到的问题，作为总结性的来分享一下，方便有需要的人查看使用，具体操作是这样的：更新了依赖，更新完之后，运行npm： 命令行：npm install 然后提示如下信息： 35 packages are looking for funding run `npm fund` for details found 18 vulnerabilities (3 low, 9 moderate, 6 high) run `npm audit fix` to fix them, or `np.
found 7 vulnerabilities (5 low, 1 high, 1 critical) run `npm audit fix` to fix them, or `npm audit
Lewis的博客
03-17 4104
1 npm报错记录 found 7 vulnerabilities (5 low, 1 high, 1 critical) run npm audit fix to fix them, or npm audit for details 2 问题分析 vue使用时提示有漏洞，那么就是直接按照后面提示的命令npm audit fix 就可以解决。 3 解决问题 之后再输入npm cache clean --force清理一下npm的缓存 ...
解决vue项目npm install 和npm run 时出现的问题
程序媛
08-01 2万+
报错1 found 10 vulnerabilities(6 moderate，4 high) run `npm audit fix` to fix them, or `npm audit` for details 注意：虽然警告有漏洞，但是不影响运行。 解决1：nmp清缓存：npm cache clean --force 解决2：把项目中的node_modules文件删掉，再执行n...
vuxui 安装使用，解决npm项目文件严重问题提示
经验之谈，不做搬运工
03-12 1万+
vuxui 的安装使用，解决npm项目文件严重问题提示 同时解决found 11 vulnerabilities (1 low, 9 moderate, 1 high) 提示。 初始化vue项目. cd myproject vue init -y 手动安装 npm install webpack webpack-dev-server babel-core babel-loader ...
02 基于@vue/cli创建Vue应用程序
Blog of Lytracy
04-17 225
文章目录1、基于@vue/cli创建Vue应用程序 1、基于@vue/cli创建Vue应用程序 官方文档：https://cli.vuejs.org/zh/guide/
npm安装 (6 high severity vulnerabilities)高危漏洞提醒
m0_59680972的博客
12-14 3087
npm安装 (6 high severity vulnerabilities)高危漏洞提醒
Vue进阶（五十四）：vue-cli 脚手架 dev-server
2401_85124192的博客
06-11 1065
/ 把配置参数传递到webpack方法中，返回一个编译对象，这个编译对象上面有很多属性，自己去看吧，主要是用到里面的状态函数 如compilation，compile，after-emit这类的。// 下面是webpack-dev-server 监听的端口号，因为没有设置process.env.PORT，所以下面监听的就是config.dev.port即8080。// 下面是代理表的处理方法，看看就行了，几乎用不上，除非你是全栈，不用webpack-dev-server，使用后台语言做服务器。
vue-cli-plugin-uncle-vue:Vue CLI的插件，可为叔叔项目服务
03-28
Vue CLI的插件“vue-cli-plugin-uncle-vue”是一个专门为Vue.js开发环境设计的工具，它扩展了Vue CLI的功能，以更好地服务于所谓的“叔叔项目”。在理解这个插件之前，我们首先需要对Vue CLI有基本的认识。 Vue CLI...
vue 2.0 ——遇见的bug: “ ‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序或批处理文件”的报错解决方案 ”
123加油的博客
10-04 1345
运行时出现“‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序或批处理文件”的报错时，大概是由于调用了。相似的报错例如：’ ********* '不是内部或外部命令，也不是可运行的程序或批处理文件。运行成功后，成功创建出新的node_modules文件夹。这里出现警告不影响使用，只要没有红色的报错就可以啦。运行项目，项目可以正常启动了。，再拷贝到其他计算机时，安装完成，没有出现报错;
详解项目升级到vue-cli3的正确姿势
12-02
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue 项目。Vue CLI 3 是其第三个主要版本，带来了许多改进和优化。在将项目从旧版本的 Vue CLI 升级到 Vue CLI 3 时，需要遵循一定的步骤以确保顺利过渡。...
安装vuecli后出现vulnerabilities错误，·vue·不是内部或外部命令，也不是可运行的程序或批处理文件
qq_55817438的博客
06-07 2484
安装vuecli后出现vulnerabilities错误，·vue·不是内部或外部命令，也不是可运行的程序或批处理文件
SSE工具【meteor npm install 错误记录及解决】found XX vulnerabilities (XX moderate, XX high)
qq_45724211的博客
07-11 531
点云语义分割标注工具 semantic-segmentation-editor【meteor npm install 错误记录及解决】
Vue-Cli安装和配置（全）
qq_44709970的博客
02-21 4560
安装、配置、淘宝镜像、可能出现的问题
15 vulnerabilities (7 moderate, 8 high) To address all issues 使用时提示有漏洞
浮游的博客
04-06 1万+
由于最近换新电脑了，所以需要重新拉项目，安装依赖后有几个报错。 npm install # 安装项目依赖包 11 packages are looking for funding run `npm fund` for details found 1 high severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details npm官网提供了命令说明，比如有幸查过一次 npm audit fix
run `npm fund` for details解决，前端开发：项目运行npm install 提示XXX ...for funding run `npm fund`...的解决方法
热门推荐
weixin_44828486的博客
08-19 4万+
run npm fund for details解决，前端开发：项目运行npm install 提示XXX …for funding run npm fund…的解决方法 35 packages are looking for funding run npm fund for details found 18 vulnerabilities (3 low, 9 moderate, 6 high) run npm audit fix to fix them, or npm audit for details
Vue CLI脚手架项目目录详解
drhnb的博客
07-07 1250
当用npm run serve启动项目时，首先会运行入口程序main.js 1、main.js会引入并加载根组件App.vue 2、注册：注册分为局部注册和全局注册,可以将components下的普通组件在App.vue中进行引入和局部注册，或在main.js中进行引入和全局注册 3、main.js 将加载的App.vue挂载到 public/index.html 中定义的容器元素上
vue项目文件夹介绍
江西第一深情的博客
11-13 2934
vue项目基础文件的介绍与组件的注册和使用
.vuerc文件路径位置在哪找
weixin_43778617的博客
09-19 3193
我当时是在创建vue项目时，一直报错,然后百度了一下说是yarn命令有问题或者没安装，2.将.vuerc 文件 将里面的 packageManager 属性设置为 npm。C:\Users\当前电脑登录账户名.vuerc。命令如下：[输出版本号即为安装成功]1.可以删除.vuerc文件。
【前端架构】npm常见报错
weixin_42578774的博客
09-10 767
发现安装包有漏洞，可以根据提示更新或查看漏洞。重命名，一般是因为npm缓存导致的。nexus发布私包，没有认证信息。
哪个是启动语句："serve": "vue-cli-service serve", "build": "node --max_old_space_size=6096 node_modules/@vue/cli-service/bin/vue-cli-service.js build --mode production", "report": "vue-cli-service build --mode production --report", "build:stage": "vue-cli-service build --mode staging", "dll": "webpack --progress --config webpack.dll.config.js", "lint": "vue-cli-service lint", "changelog": "npx conventional-changelog -p angular -i CHANGELOG.md -s", "postinstall": "patch-package", "f2elint-scan": "f2elint scan", "f2elint-fix": "f2elint fix"
最新发布
03-08
<think>好的，我现在要帮用户分析哪个是启动语句。首先，用户给了一个包含多个npm scripts的列表，需要从中找出用于启动开发服务器的命令。 我记得在Vue.js项目中，通常使用`vue-cli-service serve`来启动开发服务器。所以先看一下用户提供的脚本。用户列出的第一个script是`"serve": "vue-cli-service serve"`，这应该就是启动命令。其他像build、report等都是用于构建或生成报告的，不属于启动命令。 不过，为了确认，我需要回忆常见的Vue CLI命令。Vue CLI创建的项目默认会有serve、build、lint等脚本。其中serve用于启动本地开发服务器，支持热重载。build用于生产环境构建。所以用户的第一个脚本"serve"符合这个模式。 另外，检查是否有其他可能的启动命令。比如有时候可能有start，但这里没有。其他如dll、postinstall等显然不是启动命令。因此可以确定"serve"就是启动语句。</think>在您提供的 npm scripts 配置中，启动开发服务器的语句是： ```json "serve": "vue-cli-service serve" ``` 这是典型的 Vue CLI 项目启动命令，对应以下特性： 1. **核心功能** - 启动本地开发服务器 - 支持模块热替换 (HMR) - 自动编译和刷新 - 默认端口 8080 (可用 `--port` 指定其他端口) 2. **其他常见命令说明** ```json "build": "node --max_old_space_size=6096 node_modules/@vue/cli-service/bin/vue-cli-service.js build --mode production" // 生产环境构建（指定内存限制） "report": "vue-cli-service build --mode production --report" // 生成构建分析报告 "build:stage": "vue-cli-service build --mode staging" // 预发布环境构建 "dll": "webpack --progress --config webpack.dll.config.js" // DLL 预构建加速 ``` 启动项目时使用： ```bash npm run serve # 或 yarn serve ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值