用vue-cli脚手架快速构建webpack工程模板

最新推荐文章于 2024-06-10 15:05:54 发布
最新推荐文章于 2024-06-10 15:05:54 发布
阅读量124 收藏
点赞数
文章标签： vue.js webpack javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43990650/article/details/121177097
版权

首先得先有安装@vue-cli

npm install @vue-cli -g

之后切换到想创建工程的目录下面，输入命令
···
vue init webpack “自己取的工程名”
···
在这里插入图片描述
成功后按照提示切换到项目根目录下面，运行

npm run dev

在这里插入图片描述
打开链接可以看到项目已经搭建完毕

hongsir_12
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用vue-cli脚手架工具搭建vue-webpack项目
12-10
为了解决这个问题，Vue 官方提供了 `vue-cli` 这个脚手架工具，它可以帮助开发者快速地生成一个包含所有必需配置的项目模板。 1. **安装Node.js环境**： 在搭建Vue项目之前，首先确保你的计算机上安装了Node.js。...
vue使用vue-cli快速创建工程
01-19
本文介绍了vue使用vue-cli快速创建工程，分享给大家，具体如下： vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue ...
webpack与vue-cli的关系
青春木鱼的博客
12-03 4977
vue-cli是基于nodejs+webpack封装的命令行工具。你可以理解为汇集了各种命令的 bash，或者bat。用vue-cli执行build，实际上是webpack做的。原本需要自己配置webpack的相关配置，被cli简化了。并且按照vue的用户习惯整理了一套构建和目录规范。
Vue-CLI入门（webpack入门、安装配置Vue-CLI（命令、手动、自动版本）、使用Vue-CLI创建组件和Vuex和Vue-router、配置跨域请求数据以及配置webpack添加插件等）
AIWWY的博客
05-28 1431
目录 webpack入门链接 Vue-CLI介绍 安装配置Vue-CLI 全局安装命令 自动版本 手动版本 运行和打包项目 使用Vue-CLI 创建子组件 使用Vuex 使用Vue-router 修改webpack配置 Vue-CLI封装的webpack配置属性链接 配置反向代理（跨域请求数据） 添加webpack中插件 webpack插件链接 封装自定义插件 保存自动格式化代码配置 webpack入门链接 webpack使用入门（配置loader：style、css
vue-cli是什么？和 webpack是什么关系？
最新发布
炑焽的博客
06-10 1086
Vue CLI是Vue.js项目的官方脚手架，基于Node.js与Webpack构建。安装Vue CLI前需确保Node.js已安装，随后通过npm全局安装。Vue CLI能迅速创建和管理Vue.js项目，提升开发效率。而Webpack则负责资源打包，通过配置文件管理依赖、插件等，优化代码并分割资源，提高项目性能。Vue CLI与Webpack的完美结合，让开发者更专注于业务逻辑，轻松构建高效、稳定的Vue.js应用。
从零开始使用webpack 搭建vue项目
毕业作品网站
07-23 2334
=""
用webpack 构建自己的vue-cli
hx_1199的博客
03-19 797
用webpack 打包html css js 图片
vue-cli+webpack搭建项目
brain_bo的博客
08-07 8057
1、检查是否安装了node，node -v， 2、检查npm版本，npm -v， 3、进入项目的地址（我的是直接建立在桌面上的，比较懒），cd desktop， 4、安装cnpm（原因：因为npm安装速度超级慢，cnpm是淘宝镜像很快，也是一个小技巧哈）， npm install -g cnpm --registry=https://registry.npm.taobao.or...
详解vue-cli脚手架中webpack配置方法
12-03
Vue CLI 是 Vue.js 的命令行工具，用于快速搭建基于 Vue.js 的项目。它集成了许多配置，包括 Webpack。Webpack 是一个强大的模块打包工具，它能够处理 JavaScript、CSS、图片等静态资源，将它们打包成优化过的静态...
vue-cli脚手架-bulid下的配置文件
08-27
要使用Vue-cli脚手架，首先需要安装Node.js，并且全局安装Vue-cli。然后，可以使用Vue-cli创建一个新的Webpack项目。创建项目时，需要填写一些信息，如项目名称、项目描述、作者等。同时，也可以选择是否安装Vue-...
vue-cli3-template：基于Vue-cli3建造的脚手架项目模板
01-31
项目介绍基于Vue-cli3建造的前端开发脚手架项目模板，主要包括以下内容：Webpack4.x性能调优配置，Vue.js全家桶，移动端vw适应，单元测试等功能，可以参考，欢迎大家围观指教！项目特点特征 巴别塔 VueRouter 威克斯...
使用webpack搭建一个vue demo
01-08
前言：我们在开发vue过程中使用vue-cli脚手架工具能够十分快速的构建项目， 但是vue官方却十分不推荐初学者直接使用脚手架，为了更好理解vue-cli工作原理，故我们使用webpack构建一个vue demo，能够编写基本的vue代码 一.目录结构 目录结构如下： 初始化为npm项目后，创建图示文件，文件夹 mkdir webpack-vue npm init -y 二.项目依赖 首先安装webpack开发依赖 npm i webpack webpack-cli webpack-dev-server -D 安装babel相关依赖，编译es6代码 npm i babel-core b
webpack搭建vue项目步骤详解
q4717529的博客
07-07 5768
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
Vue3.0（alpha），2020前端必修，50分钟掌握vue@next全家桶
03-19
Vue3.0（alpha）环境搭建，响应原理（Proxy、Reflect）及核心知识点（setup，reactive，props，生命周期等）讲解。vue-router（alpha）及vuex（alpha）的使用。
Vue - webpack vue/cli 脚手架
Cxil的博客
11-20 1313
概念：为什么要学webpack？思考1、以前写的网站，文件很多，体积很大？？2、有没有一种自动整合，压缩，剔除无用代码的技术？？小结1、减少文件数量2、压缩代码体积3、提高浏览器打开速度。（浏览器打开项目的速度）
vue-cli的webpack模板项目配置文件分析
热门推荐
hongchh的博客
02-14 7万+
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西，开发过程中需要改动到build和config里面一些相关的配置，所以刚好趁此机会将所有配置文件看一遍，理一理思路，也便于以后修改配置的时候不会“太折腾”。一、文件结构本文主要分析开发（dev）和构建（build）两个过程涉及到的文件，故下面文件结构仅列出相应的内容。├─build │ ├─build.js │ ├─ch
Webpack手动搭建Vue框架（一）项目初步配置
qq_25081445的博客
04-26 956
Webpack手动搭建Vue框架
webpack5 react 和 vue 脚手架
学过的东西，讲不出来等于没学。
05-21 559
介绍 我们将使用前面所学的知识来从零开始搭建 React-Cli 和 Vue-cli。 React 脚手架 开发模式配置 // webpack.dev.js const path = require("path"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const ReactRefreshWebpackPl
webpack模板
weixin_34362875的博客
08-13 449
2019独角兽企业重金招聘Python工程师标准>>> ...
vue-cli-webpack:vue-cli 2.9.6版本初始化webpack工程
09-07
vue-cli是一个构建Vue.js工程的脚手架工具，帮助开发者快速搭建和管理Vue.js项目。而vue-cli 2.9.6版本是其一个较早的版本，可以使用它来初始化一个基于webpack的Vue.js工程。 使用vue-cli 2.9.6版本初始化webpack工程，首先需要确保本地已安装了node.js和npm。 在命令行中执行以下命令来安装vue-cli： ``` npm install -g vue-cli@2.9.6 ``` 安装完成后，可以使用以下命令来初始化一个webpack工程： ``` vue init webpack my-project ``` 这里的"my-project"是你自定义的项目名称，可以替换为其他名称。 执行上述命令后，vue-cli会根据webpack模板生成项目的基本结构和文件。 接着，需要进入项目文件夹： ``` cd my-project ``` 然后执行以下命令来安装项目所需的依赖： ``` npm install ``` 安装完成后，可以使用以下命令来启动项目： ``` npm run dev ``` 这样，webpack工程就成功初始化并启动了。通过访问http://localhost:8080，可以在浏览器中查看项目的运行效果。 在初始化的工程中，可以编辑和修改src目录下的文件，这里的主要文件包括App.vue和main.js，分别是Vue组件和入口文件。 总之，使用vue-cli 2.9.6版本初始化webpack工程能够为开发者提供一个基于webpack的Vue.js开发环境，使他们能够更高效地进行Vue.js项目的开发和管理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值