搭建webpack发布的Vue项目

最新推荐文章于 2023-08-15 20:32:24 发布
最新推荐文章于 2023-08-15 20:32:24 发布
阅读量166 收藏
点赞数
分类专栏： Vue前端 文章标签： 搭建webpack发布的Vue项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35952089/article/details/100737445
版权

创建webpack打包的Vue项目

确认电脑安装过 Node 和 Npm (如果未安装请先看另一篇)
跳转至：https://blog.csdn.net/qq_35952089/article/details/100019785

1、IEDA创建一个静态工程
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
2、用命令创建一个webpack的项目
在这里插入图片描述
命令 cd vue-cli-damo 进入项目根目录下
命令 vue init webpack
在这里插入图片描述
这里提示：是否在当前目录下创建，这里输入 Y 然后回车（Y是yes的意思）
回车之后会下载依赖
在这里插入图片描述
这里提示：项目名字是否叫 vue-cli-damo 直接回车
在这里插入图片描述
这里提示：项目描述 直接回车
在这里插入图片描述
这里提示：作者 直接回车
在这里插入图片描述
出来一个单选
选择 runtime compiler:recommended for most users 然后回车
在这里插入图片描述
这里提示：是否安装路由 输入 Y 然后回车
在这里插入图片描述
这里提示：是否使用eslin 我们选择 n 然后回车
eslin是语法校验器，安装之后校验特别严格，多一个空格就会报错，所以我们不安装
在这里插入图片描述
这里提示：是否简历单元测试 输入 n 然后回车
在这里插入图片描述
这里提示：是否使用夜视设置e2e测试 输入 n 然后回车
在这里插入图片描述
这里提示：是否项目创建后为您运行’npm安装’
选择 Yes, use NPM 然后回车
回车之后就会开始下载依赖
在这里插入图片描述
开始下载依赖
在这里插入图片描述
下载了一大堆东西（下载完成）
下载完成项目就搭建完成了。
在这里插入图片描述
再打开项目就能看到项目里面自动生成了很多东西
在这里插入图片描述
3、测试一下是否安装完成
启动项目
输入命令 npm run dev 然后回车
在这里插入图片描述
启动完成之后会出现一个访问路径，单击可以访问
在这里插入图片描述
测试成功（这里面没有内容所以是默认页面）
好了webpack项目测试完成了
在这里插入图片描述

不会飞D鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三、webpack搭建vue项目
xiaojiango0的博客
11-02 523
webpack搭建vue项目
webpack构建vue项目的详细教程（配置篇）
08-29
本篇文章主要介绍了webpack构建vue项目的详细教程（配置篇），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue-cli2 + webpack搭建vue项目流程以及打包发布流程
是一座岛
04-25 5128
目录 1.1 命令行初始化项目 1.2 分析项目目录 1.3 运行项目 1.4 多环境配置打包发布 一. vue-cli2 + webpack搭建项目流程以及打包发布流程 最近升级到vue-cli3，发现vue-cli2搭建项目命令不能用了，两者搭建开发环境项目内容也发生了变化。 vue-cli2搭建项目环境的命令：vue init webpack vue2-webpack-proj...
使用webpack搭建vue项目；webpack+vue
weixin_57265841的博客
04-10 4795
使用webpack搭建vue项目;webpack+vue
webpack 创建VUE项目
G_whang的博客
08-10 946
下载地址：https://nodejs.org/en/进入 到新建项目中，然后输入命令 初始化。下载完成以后点击安装，全部下一步即可。全局安装webpack 输入命令。安装完成后输入命令 查看。至此，创建vue项目完成。安装完成，输入命令验证。安装完成输入命令验证。
webpack搭建vue项目步骤详解
q4717529的博客
07-07 5737
webpack搭建vue项目步骤详解 第一步 执行npm init 命令 初始化出package.json文件 { "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "au
使用webpack配置vue项目
weixin_70989429的博客
07-14 707
使用webpack自己尝试搭建vue-cli
(万字) webpack搭Vue项目
游小北的博客
11-15 3635
1. 我们平时都是使用 vue-cli 脚手架快速搭建项目（vue-cli 基于 webpack），可是我们不知道其中的原理与细节，导致我们在遇到一些细节问题无法自己配置解决。 2. 为了让我们能更好的了解 vue-cli 实现过程，我们需要学习使用 webpack 从一个 index.html 文件从零开始创建一个完整的项目（包含 babel、样式预处理器、vue、webpack插件、dev-server、proxy代理等，各自有关的详细内容可翻看我的主页 3.重点是掌握使用 webpack
从零开始使用Webpack搭建vue项目(保姆级)
蜡笔小开心❤的博客
08-15 382
【代码】从零开始使用Webpack搭建vue项目(保姆级)
webpack 搭建VUE项目步骤详解
HelloWord176的博客
05-06 2235
首先我们先了解为什么要使用webpack？？？ Webpack是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装Node.js。它做的事情是，分析你的项目结构，找到JavaSc...
创建基于Webpack的Vue.js项目
逆境清醒的博客
03-19 3387
创建基于Webpack的Vue.js项目。一、Webpack简介。二、创建基于Webpack的Vue.js项目 1、前提条件(检查node和npm版本信息,升级你的 Node 版本)。2、安装Webpack、Vue.js。 3、创建基于Webpack的Vue.js项目。三、Webpack下的Vue.js项目文件结构。四、打开Vue项目管理器
webpack-vue:使用webpack搭建vue项目
05-09
使用webpack搭建vue项目 1.创建一个空项目 npm init -y 2.下载webpack，webpack-cli 目前可以使用webpack5不过还是建议使用webpack4 npm i webpack@4.44.2 webpack-cli@3.3.11 -D 3.配置webpack 1.根目录下创建...
webpack搭建vue 项目的步骤
08-28
this is a vue demo
基于webpack搭建vue2.0的脚手架项目
10-11
基于webpack搭建vue2.0的脚手架项目
基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip
05-31
【优质项目推荐】 1、项目代码均经过严格本地测试，运行OK，确保功能稳定后才上传平台。可放心下载并立即投入使用，若遇到任何使用问题，随时欢迎私信反馈与沟通，博主会第一时间回复。 2、项目适用于计算机相关专业（如计科、信息安全、数据科学、人工智能、通信、物联网、自动化、电子信息等）的在校学生、专业教师，或企业员工，小白入门等都适用。 3、该项目不仅具有很高的学习借鉴价值，对于初学者来说，也是入门进阶的绝佳选择；当然也可以直接用于 毕设、课设、期末大作业或项目初期立项演示等。 3、开放创新：如果您有一定基础，且热爱探索钻研，可以在此代码基础上二次开发，进行修改、扩展，创造出属于自己的独特应用。 欢迎下载使用优质资源！欢迎借鉴使用，并欢迎学习交流，共同探索编程的无穷魅力！ 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip
六一儿童节快乐！（六一儿童节庆祝代码）Vue开发
05-31
六一儿童节快乐！（六一儿童节庆祝代码）Vue开发 like Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes files npm run lint Customize configuration
uniapp聊天工具源码.zip
05-31
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
NX二次开发uc1603 函数介绍
05-31
NX二次开发uc1603 函数介绍，Ufun提供了一系列丰富的 API 函数，可以帮助用户实现自动化、定制化和扩展 NX 软件的功能。无论您是从事机械设计、制造、模具设计、逆向工程、CAE 分析等领域的专业人士，还是希望提高工作效率的普通用户，NX 二次开发 Ufun 都可以帮助您实现更高效的工作流程。函数覆盖了 NX 软件的各个方面，包括但不限于建模、装配、制图、编程、仿真等。这些 API 函数可以帮助用户轻松地实现自动化、定制化和扩展 NX 软件的功能。例如，用户可以通过 Ufun 编写脚本，自动化完成重复性的设计任务，提高设计效率；或者开发定制化的功能，满足特定的业务需求。语法简单易懂，易于学习和使用。用户可以快速上手并开发出符合自己需求的 NX 功能。本资源内容 提供了丰富的中英文帮助文档，可以帮助用户快速了解和使用 Ufun 的功能。用户可以通过资源中的提示，学习如何使用 Ufun 的 API 函数，以及如何实现特定的功能。
【目标检测数据集】遥感类军用飞机检测数据集3800张20类别VOC+YOLO格式.zip
最新发布
05-31
【目标检测数据集】遥感类军用飞机检测数据集3800张20类别VOC+YOLO格式.zip 数据集格式：Pascal VOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：3821 标注数量(xml文件个数)：3821 标注数量(txt文件个数)：3821 标注类别数：20 标注类别名称:["A1","A2","A3","A4","A5","A6","A7","A8","A9","A10","A11","A12","A13","A14","A15","A16","A17","A18","A19","A20"] 每个类别标注的框数： A1 框数 = 1646 A2 框数 = 1726 A3 框数 = 1164 A4 框数 = 642 A5 框数 = 1262 A6 框数 = 436 A7 框数 = 680 A8 框数 = 944 A9 框数 = 1073 A10 框数 = 924 A11 框数 = 501 A12 框数 = 702 A13 框数 = 1652 A14 框数 = 177
使用webpack搭建vue2项目
09-09
对于使用Webpack搭建Vue2项目，你可以按照以下步骤进行操作： 1. 确保你已经安装了Node.js和npm。你可以在终端中运行以下命令来验证它们是否已安装： ``` node -v npm -v ``` 如果没有安装，可以前往 Node.js 官方网站（https://nodejs.org/）下载并安装最新的稳定版本。 2. 创建一个新目录，作为你的项目根目录，并进入该目录。 3. 初始化一个新的npm项目，运行以下命令并按照提示进行操作： ``` npm init ``` 4. 在项目根目录下安装所需的依赖，包括Vue、Vue Loader、Vue Router等。运行以下命令： ``` npm install vue@2 vue-loader@15 vue-router@3 webpack webpack-cli --save-dev ``` 5. 在项目根目录下创建一个`webpack.config.js`文件，并配置Webpack的基本设置。可以参考以下示例： ```javascript const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, }, ], }, resolve: { alias: { vue$: 'vue/dist/vue.esm.js', }, extensions: ['*', '.js', '.vue', '.json'], }, }; ``` 6. 在项目根目录下创建一个`src`目录，并在其中创建一个`main.js`文件作为Vue应用的入口文件。 7. 在`src`目录下创建一个`components`目录，并在其中创建你的Vue组件。 8. 创建一个简单的Vue组件，并在`main.js`中引入该组件： ```javascript import Vue from 'vue'; import App from './components/App.vue'; new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 9. 创建一个HTML文件作为你的应用的模板，例如`index.html`： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue App</title> </head> <body> <div id="app"></div> <script src="dist/bundle.js"></script> </body> </html> ``` 10. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "build": "webpack" } ``` 这将允许你在终端中运行`npm run build`命令来构建你的Vue项目。 11. 运行以下命令来构建和打包你的Vue项目： ``` npm run build ``` 这将生成一个`dist`目录，并将打包后的Vue应用文件输出到其中。 12. 打开你的HTML文件，

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值