vue-cli基础配置及webpack配置修改的完整步骤

脚手架

脚手架帮我们帮我们把 webpack 等相关的配置都处理好，我们只需要基于脚手架快速构建一个项目即可(项目中一定包含webpack的相关配置)

vue脚手架  vue-cli

我们使用任何东西第一步都是安装

1.安装脚手架(一般安装在全局)

//=>用npm安装
$npm install @vue/cli -g
//=>用yarn安装
$yarn global add @vue/cli

安装成功后，全局环境会生成 $vue 的可执行命令，我们可以基于 $vue --version 来查看版本号，看是否安装成功

2.创建工程化项目

$vue create [项目名称](要遵循npm包的名称规范:数字或者小写字母)

第一项是我之前创建保存的配置，如果是第一次创建就有第二项和第三项

  • default (babel,eslint) ：选择默认配置项（后期自己安装需要的模块和进行配置）
  • Manually select features ：手动选择配置项

如果选择默认这篇文章就没有意义了，我们选择手动选择配置项

这里选择脚手架里的webpack配置，空格键是选择，我选择了以上这些项，如果有需要自行添减

  • babel（babel-preset-vue-app）：babel-preset-env最新的ECMAScript功能、转换Vue JSX转换generator和async/await等
  • Router ：Vue官方的路由管理器
  • Vuex ：Vue中实现公共状态管理的插件 (处理组件之间的信息通信)
  • Css Pre-processors ：CSS 预处理器（SASS/LESS/Stylus）
  • Linter / Formatter ：eslint 语法检测
  • Unit Testing ：单元测试
  • E2E Testing ：端到端测试

是否使用路由器的历史模式，选择Y；选择哪个CSS 预处理语言的配置规则，我用的是less根据自己需要选择

选择自动化代码格式化检测，我用的 vscode 选的 ESLint+Prettier

选择第一个可以保存配置方便下次使用

  • 第一个选项是把配置信息放到一个单独的文件
  • 第二项是放到package.json里

创建后的项目目录

src ：项目开发源文件

  • main.js ：打包编译的入口文件
  • App.vue ：项目页面的入口文件
  • components ：存放当前项目的公共组件
    • xxx.vue
  • assets ：一般存放项目中需要引入的静态资源文件
    • xxx.png
    • xxx.css

public

  • index.html ：当前项目的主页面，我们最后把所有在src中写的内容，通过webpack、vue编译渲染，最后呈现在index.html中的#app容器中
  • xxx.xx ：有些时候我们的某些资源可能要单独在index.html就引用了，将它放在此文件夹下，但是开发时除了这样的资源，其余的都建议放在src文件夹中

开发模式下我们基于下面这个命令，启动一个本地服务，把基于webpack编译后的内容预览

$npm run serve 或者 $yarn serve

生产模式下，把写好的内容进行编译打包，最后部署到服务器上

$npm run build 或者 $yarn build

vue-cli的其他命令

$vue inspect 查看当前项目默认的webpack配置信息
$vue add [plugin] 在当前项目中安装插件

$vue ui ：以图形化界面创建和管理项目

会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程

$vue create --help ：可以查看vue中的命令

vue-cli的一点深入

创建项目后，默认的配置中已经把，例如：less/sass 等规则配好，如果我们的项目中需要使用less等，无需配置规则，只需要安装对应的模块和加载器即可

$yarn add less less-loader -D

<script>
  impoer './xxx/xxx.xx' //=>导入需要的模块
</script>

<style lang="less">
  ...../
</style>

修改默认的webpack配置

需要在根目录中创建 vue.config.js 文件，在这个文件中修改相关配置，下面代码就是修改webpack的相关配置

  module.exports = {
	//=>process.env.NODE_ENV：环境变量中存储的是开发环境还是生产环境
	publicPath: process.env.NODE_ENV === 'production' ? 'http://www.xxx.cn/' : '/',
	//=>outputDir
	//=>自定义目录名称，把生成的JS/CSS/图片等静态资源放置到这个目录中
	assetsDir: 'assets',
	//=>关闭生产环境下的资源映射（生产环境下不在创建xxx.js.map文件）
	productionSourceMap: false,
	//=>设置一些webpack配置项，用这些配置项和默认的配置项合并
	configureWebpack: {
		plugins: []
	},
	//=>直接去修改内置的webpack配置项
	chainWebpack: config => {
		//=>config:原始配置信息对象
		config.module
			.rule('images')
			.use('url-loader')
			.loader('url-loader')
			.tap(options => {
				options.limit = 200 * 1024;
				return options;
			});
	},
	//=>修改webpack-dev-server配置（尤其是跨域代理）
	devServer: {
		proxy: {
			//请求地址 /user/add
			//代理地址 http://api.xxx.cn/user/add
			"/": {
				changeOrigin: true,
				target: "http://api.xxx.cn/"
			}
		}
	},
	//=>多余1核cpu时：启动并行压缩
	parallel: require('os').cpus().length > 1
  }

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 通过vue-cli来学习修改Webpack多环境配置和发布问题

    通过vue-cli来学习修改Webpack多环境配置和发布问题

    Vue之所以现在如此之火热,一部分也得益于有官方的脚手架生成工具Vue-cli,大大简化了初学者环境搭建的成本,但是实际业务中我们往往需要实现其他的功能来对webpack进行改造,本文将会根据一些实际的业务需求,先学习vue-cli生成的模版,然后在进行相关修改. Vue-cli生成模版文件目录 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.j

  • 详解vue-cli脚手架中webpack配置方法

    什么是webpack webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript.CSS.图片等文件,webpack就将这些静态资源文件称之为模块 webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的以来关系,所以具有更强大的JS模块化的功能,它能对静态资源进行统一的管理以及打包发布,在官网中用这张图片介绍: 它在很多地方都能替代Grunt和Gulp,因为它

  • vue-cli webpack配置文件分析

    相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧. 过完年回来后,我接手了公司的新项目.新项目是一个spa.很自然,我就想到了vue-cli脚手架了,当时研究一下它的webpack配置.于是,就有了其他的内容. 今天这篇文章,是在原来的基础上,增加了一些新版本的内容,但实质上变化不大. 说明 此仓库为vue-cli webpack的配置分析,其实只是在源码中加上注释而已.大家查看详细分析,可以从后面提到的入口文件开始查看. 分析不包括ch

  • vue-cli中的webpack配置详解

    版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.de

  • vue-cli的webpack模板项目配置文件分析

    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser

  • 详解vue-cli + webpack 多页面实例配置优化方法

    本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,

  • 详解基于vue-cli优化的webpack配置

    最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果. 项目采用的是vue全家桶,构建配置都是基于vue-cli去改进的.关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释,有助于更好的理解webpack. 仔细总结了一下,自己的优化基本还是网上流传的那几点 通过 externals 配置来提取常用库,引用cdn 合理配置CommonsChunkPl

  • vue cli 3.0通用打包配置代码,不分一二级目录

    1.项目根目录下新建vue.config.js,进行如下配置即可 module.exports={ publicPath:'', }; 补充知识:Vue-CLI3.0更改打包配置 在实际项目开发中,我们一般会直接使用vue.vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题. 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修

  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

  • vue-cli基础配置及webpack配置修改的完整步骤

    vue-cli基础配置及webpack配置修改的完整步骤

    脚手架 脚手架帮我们帮我们把 webpack 等相关的配置都处理好,我们只需要基于脚手架快速构建一个项目即可(项目中一定包含webpack的相关配置) vue脚手架  vue-cli 我们使用任何东西第一步都是安装 1.安装脚手架(一般安装在全局) //=>用npm安装 $npm install @vue/cli -g //=>用yarn安装 $yarn global add @vue/cli 安装成功后,全局环境会生成 $vue 的可执行命令,我们可以基于 $vue --version 来查

  • node.js与vue cli脚手架的下载安装配置方法记录

    node.js与vue cli脚手架的下载安装配置方法记录

    目录 一.node.js安装以及环境配置 1.下载vue.js 2.安装node.js 3.检查node程序是否安装成功 4.更改默认路径 5.添加环境变量 5.测试安装是否成功 二.安装vue-cli脚手架 1.检查node环境是否安装好 2.更改淘宝镜像下定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm 3.开始安装vue-cli 4.生成项目 5.打包上线 总结 一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en

  • 配置一个vue3.0项目的完整步骤

    说起来有点丢人,我已经使用vue好久了,但是怎么从0开始配置一个vue项目,每次还是要百度.这次决定写个博客,加强下记忆,如果再记不住就直播自己的女朋友洗澡. 以下以新建一个图书管理项目为例.我使用vue3新建项目,对于创建一个项目来说,vue3真的比vue2简单很多. 1.初始化项目 1.1全局安装vue-cli 创建vue项目,首先要确保全局安装了vue命令行工具. 我这边使用yarn而不用npm,因为yarn要比npm好用的多,强烈推荐使用.如果大家对yarn不熟悉,我这边免费赠送我的ya

  • 使用VSCODE配置GO语言开发环境的完整步骤

    1. 安装GO SDK 官方下载地址是:golan.google.cn/dl 2. 安装完毕后,会自动在配置文件中加入一些内容,其中比较重要的三个是: GOROOT(具体GO语言在硬盘上安装的位置,比如D:/GO) GOPATH(未来使用go install安装第三方工具包时,都会安装在GOPATH指定文件夹下的src或bin目录下,比如C:/Users/Administrator/Go) 最后一个是GO语言安装路径下的bin文件夹路径(例如:D:/GO/bin)添加到PATH中. 3. 在终端

  • 浅谈Vue CLI 3结合Lerna进行UI框架设计

    当前大部分UI框架设计的Webpack配置都相对复杂,例如 Element. Ant Design Vue和Muse-UI等Vue组件库.例如Element,为了实现业务层面的两种引入形式( 完整引入 和 按需引入 ),以及抛出一些可供业务层面通用的 utils . i18n 等,Webpack配置变得非常复杂.为了简化UI框架的设计难度,这里介绍一种简单的UI框架设计,在此之前先简单介绍一下 Element 的构建流程,以便对比新的UI框架设计. 一般组件库的设计者将引入形式设计成 完整引入

  • 使用Vue CLI创建typescript项目的方法

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

  • Vue CLI 3搭建vue+vuex最全分析(推荐)

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack和 webpack-dev-server之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如:

  • Vite和Vue CLI的优劣

    Vue 生态系统中有一个名为 Vite 的新构建工具,它的开发服务器比 Vue CLI 快 10-100 倍. 这是否意味着 Vue CLI 已经过时了?在本文中,我将比较这两种构建工具,并说明它们的优缺点,以便你可以决定哪一种适合你的下一个项目. Vue CLI 概述 大多数 Vue 开发人员都知道,Vue CLI 是使用标准构建工具和最佳实践配置快速建立基于 Vue 的项目的不可或缺的工具. 其主要功能包括: 工程脚手架 带热模块重载的开发服务器 插件系统 用户界面 在本讨论中需要注意的是,

随机推荐