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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
js使用ajax读博客rss示例
May 06 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
关于uniApp editor微信滑动问题
Jan 15 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
基于mysql的bbs设计(二)
2006/10/09 PHP
实用函数10
2007/11/08 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
php的debug相关函数用法示例
2016/07/11 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
js实现图片轮播效果
2015/12/19 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
Vue可自定义tab组件用法实例
2019/10/24 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
原生js实现购物车功能
2020/09/23 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python ldap实现登录实例代码
2016/09/30 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Python 下载及安装详细步骤
2019/11/04 Python
python读取Kafka实例
2019/12/23 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
电子装配专业毕业生求职信
2014/04/23 职场文书
医院保洁服务方案
2014/06/11 职场文书
临床医学专业求职信
2014/08/08 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers