当前位置:Gxlcms > JavaScript > vue-cli脚手架-bulid下的配置文件

vue-cli脚手架-bulid下的配置文件

时间:2021-07-01 10:21:17 帮助过:4人阅读

这篇文章主要介绍了vue-cli脚手架-bulid下的配置文件,现在分享给大家,也给大家做个参考。

本文章适合初学者学习,如有错请提出。近期对vue比较感兴趣,所以准备用vue写一个blog。早期先对vue脚手架了解一下,对于新手官网建议先不用vue-cli,但我觉得如果没有任何的依据凭自己写一个项目(包括webpack的配置等)这无疑是浪费时间的而且都最后还是是而非的。所以我觉得完全可以用脚手架建一个webpack项目,然后我们可以具体对应它生成的文件学习(当然这只是我的学习方法,我认为这样比较好学,但不一定人人都是这样的)。

在学习的过程中发现网上许多的简介都已经过期(vue发展的过快了吧。。。。),所以我结合自己的项目和网上的资料备注一下,希望和其他的人一起讨论。这个适合的版本为:nodejs(6.10.2)、vue(2.5.2)、vue-router(3.0.1)和webpack(3.6.0)的。适合的环境为windows的,其他的系统我也不知道可不可以用。

一、vue-cli安装、webpack项目新建

1、默认电脑已经安装了node,不会的请百度然后先安装nodejs。

2、安装好nodejs之后,全局安装vue-cli:npm install -g vue-cli。

3、新建webpack项目:vue init webpack projectname(这是比较完整的,我们学习用这个比较好)、vue init webpack-simple projectname(简易版的)。

注意:projectname项目名不能用中文。

4、“vue init webpack-simple projectname”创建新项目的目录结构:

生成新项目时并没有安装依赖,需要进入新的项目安装依赖:cd projectname -> npm install。

新建项目时,会需要填一些东西,但如果你都不想填也无所谓,全部默认、全部yes都行:

(1)、Project name:——项目名称
(2)、Project description:——项目描述
(3)、Author:——作者
(4)、Vue build:——构建模式,一般默认选择第一种
(5)、Install vue-router?:——是否安装引入vue-router,这里选是,vue-router是路由组件,后面构建项目会用到
(6)、Use ESLint to lint your code?:——eslint的格式验证非常严格,多一个空格少一个空格都会报错。个人觉得如果是平时练习的话可以选yes因为这个可以规范自己js代码的书写规范。但在实际开发项目中不建议使用,会影响开发效率。
(7)、Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试,可以不用安装。

“vue init webpack projectname”创建新项目的目录结构:

二、build目录下配置文件之check-versions.js

这个文件并不是十分重要,只要稍微了解就行了。

三、build目录下配置文件之utils.js

这个文件主要用于处理有关于css方面的,主要对后面vue-loader.conf.js文件有关系,对webpack配置loaders方面也有影响。

四、build目录下配置文件之webpack.base.conf.js

从这个文件开始,webpack配置文件正式开始,前面的相当于是这个文件参数般的存在。而实际上这个也不是正式会运行的配置文件。一个项目有2中情况:开发环境和生成环境。这2中环境一些方面的配置是不一样的,比如在生产环境我们会对js和css进行压缩以减少宽带。这个文件实际上是这2中环境通用的配置。下面的webpack.dev.conf.js文件(开发环境)、

webpack.prod.conf.js(生产环境),这2个文件才是实际环境运行使用的配置文件。

五、build目录下配置文件之webpack.dev.conf.js

webpack.prod.conf.js也差不多。这2者之间的差别以后再讨论。

六、config目录下之index.js

这个文件配置了一些全局属性,分别dev和build用于区别开发环境和生产环境不同的地方。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

AJAX机制详解以及跨域通信

Ajax无刷新分页的性能优化方法

详解ajax +jtemplate实现动态分页

以上就是vue-cli脚手架-bulid下的配置文件的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行