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


Posted in Javascript onOctober 20, 2019

脚手架

脚手架帮我们帮我们把 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包的名称规范:数字或者小写字母)

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

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

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

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

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

这里选择脚手架里的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 :端到端测试

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

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

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

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

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

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

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

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

创建后的项目目录

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

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-cli基础配置及webpack配置修改的完整步骤

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

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

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
  }

总结

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

Javascript 相关文章推荐
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
vue实现路由切换改变title功能
May 28 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
关于Vue中axios的封装实例详解
Oct 20 #Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 #Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 #Javascript
vue实现二级导航栏效果
Oct 19 #Javascript
vue.js实现二级菜单效果
Oct 19 #Javascript
vue实现多级菜单效果
Oct 19 #Javascript
vue.js实现三级菜单效果
Oct 19 #Javascript
You might like
php str_pad 函数使用详解
2009/01/13 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
PHP分享图片的生成方法
2018/04/25 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
python字符串的常用操作方法小结
2016/05/21 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
小学美术教学反思
2014/02/01 职场文书
师德师风个人总结
2015/02/06 职场文书
2015年宣传工作总结
2015/04/08 职场文书
家庭经济困难证明
2015/06/23 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
接收函
2019/04/22 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
Redis唯一ID生成器的实现
2022/07/07 Redis