You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
配置里面有个compilerOptions的参数preserveWhitespace为false,这个意思是当它的值为true时意味着编译好的渲染函数会保留所有 HTML 标签之间的空格。如果设置为 false,则标签之间的空格会被忽略。这能够略微提升一点性能但是可能会影响到内联元素的布局。具体参考此处:链接
配置好module后我们还要引入插件,这个是必须的
// 引入vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 添加到plugins中
new VueLoaderPlugin()
eslint-config-standard 包含了标准的eslint代码风格。当然你还可以选择其它的标准,比如google的eslint-config-google,爱彼迎的eslint-config-airbnb,这些插件都有前置依赖要求,可以用这个命令来查看前置依赖,以standard为例npm info "eslint-config-standard@latest" peerDependencies,这就是为啥上面要安装import、promise、node这些。
写在前面
在使用Vue开发单页面的时候,我们大多数时候都是使用的官方CLI工具,现在的Vue CLI已经迭代到了4.X了,可以说很成熟稳定了,能满足大多数要求,而且上手简单。本着折腾摸索的精神,还是打算自己搭建一个开发环境,熟悉各个流程。
我的node.js及npm版本如下:
开始
1、初始化一个项目
首先你要新建一个文件夹,我这儿叫
customized-vue-proj-mobile
,然后在你的文件夹右键打开git bash输入以下命令来初始化项目(需要安装git,当然用cmd也是可以的):执行完这个命令过后,会在目录生成一个
package.json
的文件,我的文件内容如下:这样一个项目就先初始化完毕,接下来开始进入各种工具的安装来完成环境的搭建。
2、安装webpack
基于webpack的话肯定要先安装好webpack才能继续安装后续的,所以先来安装命令:
接下来还需要安装CLI,从webpack4开始必须要安装webpack cli才能执行webpack相关的命令
接下来输入
npx webpack --help
来测试webpack是否处于可用状态,如果输入这个命令后面板出现一大串配置帮助信息则代表webpack可用。现在在项目目录下新建一个src文件夹,里面新建一个main.js文件,在里面先随便写点js代码。然后在建立一个build文件夹,并新建一个webpack.config.js配置文件。这样一来我们的目录结构就是这个样子:
文件建好了但是还没有内容,肯定跑不起来,接下来对webpack.config.js操作一番,这里我不叙述具体过程了(#滑稽保命),直接贴代码,里面我写了注释:
然后呢再把package.json改造一下,在scripts处添加一句
dev
这个命令:一顿操作过后,我们开始来试一试这个命令能不能用,在控制台下输入:
稍等一会儿就会出现以下信息,则代表我们打包输出成功:
此时项目的结构变成这个样子:
环境搭建到这儿只能说webpack配置正常了,还有许多额外东西需要配置,比如以下
3、配置相关工具
3.1、ES6+转ES5
首先来一波安装命令,安装好相关的依赖:
现在我们需要配置webpack来使其支持babel,这里就需要使用到刚才安装的babel-loader。在配置文件中加入以下代码:
在文件中加入以下内容:
配置好后,去main.js里面写一些es6+的语法的js代码,然后执行
npm run dev
你会发现dist目录下生成的js文件语法都转换成es5的了,但是promise却没有转换,这里我们还需要polyfill。输入以下命令安装必须的依赖:
安装完毕后去babel.config.js修改代码如下:
这样一来你的js就可以运行在低版本浏览器里面了,比如Promise。
3.2、配置css预处理器
还是先安装依赖
因为loader加载是从右往左加载。(为什么从右往左加载 )这里的编译顺序是先用css-loader将css代码编译,再交给style-loader插入到网页里面去。所以css-loader在右,style-loader在左。
下载安装好依赖过后,在配置文件
webpack.config.js
中的module->rules
里面加入以下代码:3.3、创建Html文件以及相关处理
首先在项目目录创建一个目录public,里面再创建一个index.html,作为单页面的唯一入口。代码如下:
此时目录结构变成如图所示
创建好文件后我们需要一个插件来处理html文件,只有js文件正常导入到html文件我们的项目才能运行起来,输入以下命令来安装
html-webpack-plugin
:安装完成后,再webpack配置文件的plugins中加入以下代码:
3.4、配置字体、图片等文件的处理
开发过程肯定会遇到很多媒体文件,特别是图片,webapck有专门的loader来处理这些文件,先安装好依赖:
然后我们在webpack的配置文件中加入以下代码:
以上我们就配置好了媒体文件相关的处理。
3.5、让webpack识别vue文件
安装依赖:
首先配置module里面的内容:
配置里面有个compilerOptions的参数preserveWhitespace为false,这个意思是当它的值为true时意味着编译好的渲染函数会保留所有 HTML 标签之间的空格。如果设置为 false,则标签之间的空格会被忽略。这能够略微提升一点性能但是可能会影响到内联元素的布局。具体参考此处:链接
配置好module后我们还要引入插件,这个是必须的
具体的大家可以参考此处:链接
然后我们还需要配置alias,这样可以减少路径过长引用的麻烦:
3.6、配置postcss
这个地方我配置了三个插件,autoprefixer、postcss-pxtorem、postcss-px-to-viewport,后两个你只需要配置其中一个即可,主要看你开发使用的rem还是vw,自行选择即可。
安装好依赖过后,在项目的根目录建立文件
postcss.config.js
,然后在文件中输入以下内容:然后呢,webpack配置加上:
3.7、配置热更新功能
安装依赖:
安装完成后,进行如下的配置:
4、定义环境变量
这个主要是定义这个玩意儿
process.env.NODE_ENV
,定义好这个我们一般可以来判断什么样的环境执行什么样的代码,我们知道webpack的打包环境和开发环境配置一般是不一样的,这里不展开,后面会讲。比如我们在入口main.js里面这样来写代码判断:那么定义这个环境怎么操作呢,第一种是借助webpack的插件DefinePlugin,
我们在plugins里面加入以下代码:
那么我们最终打包过后访问到的process.env.NODE_ENV的值就是development。
另一种使用webpack4自己集成了的环境判断,我们只需要在配置文件里面声明mode即可,推荐使用这种
有了上面的mode设置,我们照样能取到process.env.NODE_ENV的值。
关于process.env.NODE_ENV的知识点这里有几篇文章可以参考:
5、集成Vue全家桶
安装依赖
安装完依赖过后,在src目录下新建一个App.vue的文件。写入以下代码:
在src下再新建router、store两个目录,再目录下分别新建router.js和store.js。顺便再把其他文件夹也建好,如components、assets、views。现在我的目录结构如下图所示:
main.js里面修改为如下代码:
建好这些文件过后其实后面的代码书写就跟官方脚手架搭建好的写法一样,这里就不在演示其它文件的代码怎么书写了,到时可以参考我的源代码。
这个时候,我们直接npm run dev的话会打包,所以我们需要把package.json的scripts中的dev改成如下的代码:
走到这步,如果你做好了前面的工作,理论上这儿执行npm run dev后就能看到效果了,我这儿的效果如图所示:
6、区分开发环境和生产环境
做单页面开发我们都知道,开发环境和生产环境是不太一样的,平时使用官方cli时开发命令用的npm run dev,而打包发布时npm run build。这里面的配置肯定是存在区别的。
现在在build目录下新建webpack.dev.js和webpack.prod.js两个文件,用来区分开发环境和生产环境。同时把开发环境和生产环境通用的配置都写在webpack.config.js里面。
好了,大概了解了区别后,我们还需要单独安装其他没有的依赖,先来波安装命令,一把梭:
接下来修改相关的文件
6.1、webpack.config.js
6.2、webpack.dev.js
6.3、webapck.prod.js
配置好相关文件后我们再修改下package.json中的scripts:
新增
增加代码风格检测(针对Vue+VSCode)
首先是Vue项目的话,需要安装VSCode插件。
这儿呢我们主要是配置Eslint,这个配置好后你的项目在开发过程中会有更细致的代码风格相关的提示,规则可以自定义,这样可以方便不同公司团队有针对性的自行配置。(这儿我选择了standard规范)
首先我们需要安装各种依赖,先来这几个核心的
接下来周边的扩展:
eslint-config-google
,爱彼迎的eslint-config-airbnb
,这些插件都有前置依赖要求,可以用这个命令来查看前置依赖,以standard为例npm info "eslint-config-standard@latest" peerDependencies
,这就是为啥上面要安装import、promise、node这些。安装完毕后进入下一步,在项目根目录新建一个
.eslintrc
文件。在文件里面加入以下配置信息,这只是一个最基本的配置。
我们还可以配置实时编译校验,在webpack的module->rule中加入以下loader(在webpack.dev.js中)
安装eslint-loader
做好配置
添加完毕后可以到你的项目做个测试,看会不会报警告或者错误,比如定义一个未使用的变量。
你还可以在项目根目录建一个
.eslintignore
文件,用来忽略你不想检查的文件或者文件夹,比如我忽略掉node_modules文件夹如果你不想手动修改eslint抛出的规则报错,可以借助脚本命令,在package.json中加入如下代码:
然后执行:
这个基本能修复大多数格式问题,不能修复的就只能手动修改了。
这样一来eslint就配置完毕了,想要更加细致的规则配置请参考官方文档。
git commit时开启eslint检测
我们还可以做得更加严格点,那就是代码不符合规范的不让提交。(这里借助了git hooks,详情见此处:链接地址)
首先我们需要安装一个依赖:
然后在根目录新建一个文件
.huskyrc
。在里面加入以下代码:再在package.json里面新加一个script:
这样一来你每次提交代码时都会先检查代码样式。
安装一下依赖:
在webpack.config.js中加入以下代码:
链接地址
链接地址
链接地址
链接地址
链接地址
链接地址
链接地址
将错误展示在浏览器页面上
一般我们的报错只能在浏览器的console面板上看,我们可以直接把他展示到界面上。
在devServer属性上添加overlay:
最后
相关配置到这儿就结束了,后期会继续更新优化方面的内容,如代码拆分这些,本篇只是如何来搭建一个环境并跑起来,并没有优化相关的内容。如有错误还请大家交流指出,觉得不错的话点个赞再走吧!
The text was updated successfully, but these errors were encountered: