使用cnpm打包VUE脚手架项目步骤

最新推荐文章于 2024-04-25 10:03:34 发布
最新推荐文章于 2024-04-25 10:03:34 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26993175/article/details/113489679
版权

一、安装环境

1、安装依赖库

cd dts-shop/admin-ui
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

2、编译与运行
会自动弹出首页，如果出现管理后台登录页面，则表明管理后台的前端运行正常

cnpm run dev

二、打包

1、切换到项目根目录下，运行打包命令

cnpm run build  #相关文件被打包

结果报错npm ERR! missing script: build，后来发现package.json中scripts参数为
在这里插入图片描述根据package.json输入正确命令：

cnpm run build:prod --report

在这里插入图片描述
打包完成会发现在根目录下多了一个dist目录：
里面就是打包后的结果
在这里插入图片描述

不丸子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue脚手架与项目安装.doc
12-17
前端vue开发配置本地开发环境node+webpack+cnpm+vue,配置环境到创建第一个项目并在本地运行，喜欢的小伙伴记得点个赞就行，里面是配置文档，照着一步一步来即可，很方便
VUE脚手架具体使用方法
01-19
什么是vue脚手架？ 他是一个快速构建 vue 项目的工具，通过他，我们可以将 vue 所需要的文件安装完成。 vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持， 相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 安装 vue-cli 脚手架 安装脚手架需要用 cnpm( 淘宝镜像 ) 安装 , 直接用 pip 安装 会失败 , 安装 cnpm 命令如下 : npm install cnpm -g --registry=https://registry.npm.taobao.org 安装成功输入
打包优化须知命令
最新发布
qq_61990666的博客
04-25 216
理解:在本地C盘下有打包的文件,以这个我们本地为服务器,自然是可以绝对路径,但是在非本机为服务器则绝对路径可能无法找到,因为是讲打包放入,但绝对路径找可能是从c盘开始.这里调用返回一个a模块,也会讲vue分成j文件,但是不是和import的。我们使用导入,则会全部导入到打包内的js文件夹内.这种形式之后解析会的js一个js文件全部导入.js内,当调用时,导入对应的js文件.在根目录下生成dist文件夹。2)使用相对路径而非绝对路径。3)打包:路由懒加载。
使用vue脚手架（vue-cli）搭建一个项目详解
11-28
1.首先得下载node.js。方法可自行百度。 2. 3.一开始报很多错误，后来用管理员就没问题了。 4. 5.如上图会遇到卡住的问题，解决方法是 在最后一个选项上选择No,I will handle it myselft，然后cd vue_test，然后cnpm install，这样就成功了，然后执行npm run dev就出现： 6.浏览器端访问localhost:8081   7.项目目录   8.图片来源于网络 以上所述是小编给大家介绍的vue脚手架（vue-cli）搭建项目详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对
vue脚手架及vue-router基本使用
12-12
首先在大前提vue-cli已经安装好的情况下，并且cnpm install后(官网使用的是npm，但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象)，这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具，对于刚接触的新手们建议关闭，不然代码写的不符合它的规范你的编译器会一直报错，如下图 安装好脚手架之后就像这样 终端输入npm run dev，然后打开localhost:8080就可以看到项目运行啦 大致分析一下几个比较常用的文件把，如下图 1.build：主要用来配置构建项目以及webpack 2.config：项目开发配置 3.npm或
【CSDN软件工程师能力认证学习精选】vue.js 三种方式安装(vue-cli)
CSDN高校俱乐部官方博客
02-26 2115
CSDN软件工程师能力认证（以下简称C系列认证）是由中国软件开发者网CSDN制定并推出的一个能力认证标准。C系列认证历经近一年的实际线下调研、考察、迭代、测试，并梳理出软件工程师开发过程中所需的各项技术技能，结合企业招聘需求和人才应聘痛点，基于公开、透明、公正的原则，甑别人才时确保真实业务场景、全部上机实操、所有过程留痕、存档不可篡改。 我们每天将都会精选CSDN站内技术文章供大家学习，帮助大家系统化学习IT技术。 Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web .
cnpm run build 错误
weixin_34356138的博客
07-04 1936
2019独角兽企业重金招聘Python工程师标准>>> ...
cnpm run build: command not found遇到的坑
运维@小兵的博客
07-16 2117
在Jenkins pipeline执行完cnpm install之后再执行cnpm run build提示cnpm run build: command not found 去执行机上执行没问题，那问题应该就出现在Jenkins上面，使用绝对路径是一样的报错 后面在pipeline的代码中发现cnpm run build之间的空格标了红色，手动输入这个命令解决问题。 之前cnpm run build的命令是从开发给的文档上拷贝的，在IDEA上没有提示有问题 原因就是空格是分两种的，标准的是32，另外一个是1
cnpm run build 打包时遇到 Callback was already called 的解决方法
erpao的博客
06-02 5113
今天用VS Code在给一个完整的vue项目打包时，遇到了Callback was already called
npm和cnpm安装和创建vue项目
LT19990304的博客
09-27 193
1，npm安装 Vue脚手架 Vue Cli (安装 | Vue CLI (vuejs.org)) 1、如果下载慢 换淘宝镜像 npm config set registry " https://registry.npm.taobao.org " 2、下载cli npm install -g @vue/cli 3、验证 vue --version 异常解决 npm install -g @vue/cli-init 创建项目 vue init webpac...
node.js安装| 解决npm下载慢 | npm在项目开发中常用命令 | dependencies与devDependencies的区别 | npm build 打包配置
qq_32352777的博客
03-27 3350
本文主要阐述以下几个部分内容： node.js的安装与配置与使用cnpm npm 常用命令及参数详解 dependencies与devDependencies的区别 npm build打包详解 （注：所有操作在windows下） 目录 一、node.js的安装与配置与使用cnpm 1、下载node.js安装包 2、安装node.js 3、环境配置 4、修改系统环境变量 ...
VUE脚手架的下载和配置步骤详解
01-19
cnpm i @vue/cli -g 2.第二步创建项目 创建文件夹,打开文件命令窗口 vue create 自己创建的项目名 3. 有两个选项，选择第二个，也就是自己选择配置 4. 选择自己需要的配置 5. 进行下一步,选择 Y 6. 选择自己...
npm 打包 vue 项目
WeiPR的博客
10-08 1387
进入项目根目录 打开cmd 运行命令 npm run build 打包项目 注意：放到Tomcat webapps目录下的某个目录中时 需要改vue项目打包配置文件 config\index.js //build 节点下修改 build: { // Template for index.html index: path.resolve(__dirname, '....
npm 换成 cnpm ,提升打包速度
yingchengzzz的博客
04-12 437
安装cnpm npm install -g cnpm 查看镜像地址是否为淘宝 npm get registry 如不是 切换成淘宝 npm config set registry http://registry.npm.taobao.org/ 使用cnpm安装vue-cli cnpm install -g @vue/cli 删除node_modules文件夹, 用cnpm下载 cnpm install ...
cnpm安装webpack_webpack打包
weixin_39972777的博客
11-30 348
以前写页面js什么的，写完了之后就直接将整个文件夹扔到服务器上去了，所有的代码就这样一览无余的展示在用户面前，不用说，这种模式简直low到爆，于是决定使用webpack打包项目。先来说安装，直接使用npm命令，或者，也可以使用cnpm，速度会比较快。打开cmd，执行命令：cnpm install webpack -g，执行完成之后，webpack环境就安装好了。然后执行 cnpm install ...
【NPM】cnpm无法打包问题解决
Kida 的技术小屋（CSDN 版）
10-26 5712
刚好今天遇到了一个关于前端使用cnpm打包的问题，先记录一下，干技术的切记要戒骄戒躁，异常抛出多有可能解决一个就将其他的都解决了
跟我一起部署和定制 CNPM——基础部署
weixin_33888907的博客
07-12 92
原文链接：https://xcoder.in/2016/07/09/lets-cnpm-base-deploy/ 本章会介绍 CNPM 的基础部署方法。 该文章所对应的 cnpm 目标版本为 v2.12.2，上下浮动一些兼容的版本问题也都不是特别大。 准备 想要部署 CNPM，你需要做以下的一些准备。 部署的宿体，如服务器、云主机、自己...
vue-cli使用 npm run build打包后流程
weixin_40588273的博客
09-20 3479
目前，使用vue-cli脚手架写了一个前端项目，之前一直是使用npm run dev 在8080端口上进行本地调试。突然想使用npm run build进行上线打包，试试能否成功看到我的项目效果。 1. npm run build命令。 ** 2.一开始运行npm run build 命令时，有这么一段提示： ** 这段话的意思就是说： 构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。 到项目目录下的config文件夹里的index.js文件中,将build对象下的as
npm打包发布记录
weixin_46037781的博客
02-15 576
一、登录注册 需要注意的是：有个验证邮箱需要点击才能发布（不然会影响后续，导致发布不成功） 二、项目构建 初始化 # 整个小js第一次发布 vue init webpack-simple project-name # 都懂 npm i 项目（保留一个第一次试试就可以了） 随便弄个验证（这里是做个插件install） export default { install: function (Vue, options) { // 邮箱验证 Vue.prototype.$is
cnpm安装vue脚手架
06-01
使用 cnpm 安装 Vue 脚手架（Vue CLI），可以通过以下命令进行安装： ``` cnpm install -g @vue/cli ``` 该命令会从淘宝镜像安装最新版本的 Vue CLI。 安装完成后，可以通过以下命令检查 Vue CLI 的版本： ``` vue --version ``` 如果输出了版本号，则说明安装成功。 使用 Vue CLI 创建一个新的项目，可以通过以下命令进行： ``` vue create <project-name> ``` 其中 `<project-name>` 为项目名称，例如： ``` vue create my-project ``` 该命令会在当前目录下创建一个新的 Vue 项目，并自动安装相关依赖。 创建完成后，可以进入项目目录，并启动开发服务器： ``` cd my-project npm run serve ``` 该命令会启动一个开发服务器，可以在浏览器中访问 http://localhost:8080 查看应用程序。 除了使用命令行创建项目外，Vue CLI 还提供了可视化的图形化界面，可以通过以下命令启动： ``` vue ui ``` 该命令会在浏览器中打开 Vue CLI 的图形化界面，在该界面中可以创建、管理和运行项目。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值