vue-cli简化webpack配置vue项目

最新推荐文章于 2024-05-08 23:00:38 发布
最新推荐文章于 2024-05-08 23:00:38 发布
阅读量219 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46049791/article/details/121405892
版权

1.运行cmd，安装vue-cli: npm install -g @vue/cli
2.安装完成后运行vue -V命令，输出@vue/cli 4.5.15，即表示安装成功
在这里插入图片描述

3.找到要新建项目的文件夹，右键选择编辑地址，输入cmd，打开如下界面：
在这里插入图片描述

4.初始化webpack1项目：vue create demo(想创建的项目名称)
5.初始学习时选择manually select features，确定
在这里插入图片描述

6.选中choose vue version babel css pre-processors
在这里插入图片描述

7.选择新建vue2还是vue3项目
8.选择less
在这里插入图片描述

9.选择 In dedicated config files
10.完成vue项目的自动化配置
在这里插入图片描述

weixin_46049791
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli中的webpack配置详解
08-29
本篇文章主要介绍了vue-cli中的webpack配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli webpack配置文件分析
12-09
相信vue使用者对vue-cli都不会陌生，甚至可以说，很熟悉了，但对其webpack的配置可能知之甚少吧。 过完年回来后，我接手了公司的新项目。新项目是一个spa。很自然，我就想到了vue-cli脚手架了，当时研究一下它的webpack配置。于是，就有了其他的内容。 今天这篇文章，是在原来的基础上，增加了一些新版本的内容，但实质上变化不大。 说明 此仓库为vue-cli webpack的配置分析，其实只是在源码中加上注释而已。大家查看详细分析，可以从后面提到的入口文件开始查看。 分析不包括check-versions.js文件，因为check-versions.js是检测npm和node版
配置一个vue/cli 4.5版本的环境
fzdxzcxy123的博客
06-24 1452
第一步，清除所有旧环境 卸载nodejs。 删除旧有的node配置 3.删除全局的依赖 第二步，安装nodejs 14. 未知必须要支持vue/[email protected]的版本 第三步 1.配置依赖目录 配置npm在安装全局模块时的路径和缓存cache的路径 因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示： 所以这里配置自定义的全
vue-cli发布版本时，打包问题的正确解决方案
weixin_34004750的博客
01-10 951
一、修改后端express配置： 编辑bin/www修改端口号为80（当然如果喜欢域名中带有端口可以不修改，推荐修改）。输入：vim bin/www。显示如图： 二、检查后端express中的view下的index.html存在与否，若存在对比web代码中的index.html是否一样，若不一样，将web代码中的index.html...
查看vue-cli搭建项目的webpack默认配置
qq_40815009的博客
11-14 6056
vue-cli对webpack配置进行了抽象，所以不能直接查看，但是vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。
创建vue项目
leeyu的博客
11-15 458
创建vue项目
vue-cli4.5生成vue3的内置webpack配置
大赚万万亿
12-01 1277
生产环境 { mode: 'production', context: '/Users/sin/diynews/vue3clie/aasd', devtool: 'source-map', node: { setImmediate: false, process: 'mock', dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empt
使用Vue-cli2+webpack搭建多页面应用工程
jayson_hk的博客
12-05 585
关于vue、vue-cli、webpack相关的环境在这里就不一一细说了，不了解的可以参考官网教程，在这里直接进入正题 1. vue init webpack创建工程，得到的工程结构如下： 执行 vue init webpack pro_name 执行 npm run dev，保证项目是可以正常运行 2.调整项目目录结构 打开目录文件夹，主要修改src下的目录，在src文件夹里新建pages文...
后台管理系统 Vue-Element 基础功能
Lyndon的专栏
07-03 1660
基于Vue+Element框架，实现后台管理系统基本布局
Vue学习总结（三）：webpack和vue-cli
热门推荐
诗和远方
04-10 2万+
webpack Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。 中文官方网站：https://www.webpackjs.com/ 官网给出的解释： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(depen...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
通过Vue-cli进行webpack打包的坑 ...你也许会注意到vue-cli与webpack结合的项目中，我们通常会有两个静态资源的路径：src/assets和static/，他们两者的区别是什么呢？本文主要和大家介绍了vue-cli与
详解vue-cli脚手架中webpack配置方法
12-03
什么是webpack webpack是一个module bundler（模块打包工具），所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块 webpack支持AMD和...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
主要介绍了webpack4+Vue搭建自己的Vue-cli，对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧
webpack和vue cli 4.4.4的概念理解及搭建
yanhua1575的博客
06-14 2682
1.webpack 1.1概念 官方文档解释： At its core, webpack is a static module bundler for modern JavaScript applications. 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 从模块和打包的概念上理解就是： webpack中的模块化 webpack其中一个核心就是模块化开发，并且处理模块间的依赖关系。不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中
webpack4+vue-cli构建vue项目
成长笔记
04-18 2940
1.安装node js 第一步检测是否安装node；没有安装node的同学请到官网下载安装https://nodejs.org/en/download/ 安装成功后在命令行查看node版本，如果有说明安装成功。 node -v 2.利用淘宝npm镜像安装相关依赖 npm install -g cnpm--registry=https://registry.npm.taobao.org ...
vue-cli配置webpack.config.js
weixin_34343308的博客
03-14 3423
在项目中输入:webpack会报以下错误，就是找不到webpack.config.js这个文件，其实这个文件新建项目的时候是没有的，需要自己去新建 1.在根目录新建文件：webpack.config.js 2.在webpack.config.js中加入以下代码 'use strict' // Template version: 1.3.1 // see http://vuej...
vue-cli 构建vue项目升级webpack4
好了好了
08-17 5272
原因 从前车马慢，打包一打一上午。 在上一个项目中，打包速度的问题是个大问题，几经优化，也没有让我满意，但项目已经在线上运行，不敢轻举妄动。现在比较轻松又在为新的项目做准备，webpack4 搞一发。 vue-cli 搭建项目 还是使用 vue 的自带脚手架进行项目初始化 我本地vue-cli 版本是 2.9.1 项目初始化成功。看一下composer.json 可以看...
vue3.0 vue.config.js配置（简洁，清晰）
xy19950125的博客
06-26 4532
const path = require('path') module.exports = { publicPath: '/', // 输出文件目录 outputDir: 'dist', assetsDir: 'assets', lintOnSave: false, chainWebpack: (config) => { config.resolve.syml...
可视化大屏比例
最新发布
梦寻汝的博客
05-08 160
【代码】可视化大屏比例。
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、付费专栏及课程。

余额充值