记录整理下vue-cli webpack 常用配置说明

580 阅读2分钟

~package.json

package.json文件会描述这个NPM包的所有相关信息,包括作者、简介、包依赖、构建等信息,格式是严格的JSON格式。package.json来制定名单,需要哪些npm包来参与到项目中来,npm install命令根据这个配置文件增减来管理本地的安装包。

重点:devDependencies和dependencies的区别: devDependencies里面的插件只用于开发环境,不用于生产环境,即辅助作用,打包的时候需要,打包完成就不需要了。而dependencies是需要发布到生产环境的,自始至终都在。比如wepack等只是在开发中使用的包就写入到devDependencies,而像vue这种项目全程依赖的包要写入到dependencies

~其他文件

、.editorconfig:编辑器的配置文件

、.gitignore:忽略git提交的一个文件,配置之后提交时将不会加载忽略的文件

、index.html:页面入口,经过编译之后的代码将插入到这来。

、package.lock.json:锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致

、README.md:可此填写项目介绍,(可以标明运行、编译、生产的一些参数值)

、node_modules:根据package.json npm install 时候生成的的依赖(安装包)

~src文件夹

、assets文件:脚手架自动会放入一个图片在里面作为初始页面的logo。平常我们使用的时候会在里面建立js,css,img,fonts等文件夹,作为静态资源调用

、components文件夹:存放组件,用来实现复用等功能。

、router文件夹:该文件夹下有一个叫index.js文件,用于实现页面的路由跳转。

、App.vue:作为我们的主组件,可通过使用开放入口让其他的页面组件得以显示。

、main.js:作为我们的入口文件,主要作用是初始化vue实例并使用需要的插件。

~config文件夹

config/index.js

此配置文件是用来定义开发环境和生产环境中所需要的参数(修改开发环境的地址和端口/编译之后文件的路径)

(首次编译可能img、js、css 路径有问题,核对此处)