vue脚手架项目目录及介绍

很多时候我们不会如何去写 是因为我们不知道基本的原理 所以在写一个项目的时候 我们要先明白 什么文件是干什么的 才能更好的去实现我们的需求

cli 启动 项目目录

node_modules // 项目中依赖包 （npm i）下载
public // 静态资源目录 应用 唯一 index.html就在public中
  index.html // 项目主页面
  //在main.js里面定义的实例将挂载在#app节点下，内容通过vue组件填充。
src  // 源码目录
  assets // 静态资源目录  开发中 用到的静态都放到这里
  components // 用来放公共组件的（不是路由组件）
  router // 路由配置文件
  views // 路由组件 放置目录
  App.vue // 根组件 这里面有router-view 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
  main.js // 入口文件 加载公共组件
.eslintrc.js // eslint 配置文件
.gitignore // git 忽略文件 在项目开始就创建.gitignore文件的习惯，否则一旦push 需要重新清除git缓存
.editorconfig // 代码格式
babel.config.js // babel配置（es6转es5）
vue.config.js // 项目配置文件
package-lock.json // 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
package.json // 项目基本信息 项目开发所需模块
  // 有三个脚本命令
      "serve": "vue-cli-service serve", // 运行项目 启动服务器
      "build": "vue-cli-service build", // 构建生产环境代码 生成dist目录
      "lint": "vue-cli-service lint" // 自动验证并修改 代码格式

main.js入口文件

webpack中入口文件
会自动 加载到 index.html上
main.js会自动 引入到 index.html上

自定义vueCli配置

在根目录下定义个 vue.config.js文件在这里 定义cli配置
每一次修改配置 （包括我们项目中所有的配置文件），只要修改了就要重启项目否则无效