~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 路径有问题,核对此处)