cli项目目录

读目录

---

• node_modules ： 项目的依赖包
• public ： 项目的静态资源文件夹 【 生产环境下的，webpack不编译 】
• src： 源代码开发目录
  • assets 项目的静态资源文件夹 【 开发环境下的，webpack会编译 】
  • components 存放组件【 公共组件 】
  • App.vue [ App组件 ] ， 一个vue文件【 单文件组件 】就是一个组件
    • 单文件组件, [ xxx.vue 文件 ]
      • 构成
        • template 模板[ jsx ] 必须有
        • script 组件的选项 data methods computed watch 可以没有
        • style 组件的样式 可以没有
  • main.js 项目的入口文件
• .browserlistrc 浏览器列表兼容
• .gitignore git上传忽略文件配置
• babel.config.js/.babelrc 优雅降级配置文件
• package.json 项目的脚本启动记录文件和依赖记录形象
• postcss.config.js
  • css预处理器配置
• README.md 项目说明文件
• yarn.lock
  • 记录依赖包中的依赖的版本信息
  • 可以保证项目版本一致性

看到目录文件夹我就能知道是哪一个 vue-cli 版本 ？

• 如果有build/config那么基本上可以肯定是cli2
• 如果看不到build/config那么就是cli新版本

创建项目目录

---

1. cli 安装：cnpm i @vue/cli @vue/cli-init -g
   (老版本2.x和新版本一起装了 全局安装)
2. 检测安装是否成功：vue
3. 查看版本：vue -V
4. 创建文件：vue create filename
   - 选择 Manually select features
   - 选择 Babel cssPre-processors (用空格选择)
   - 选择 Stylus
   - 选择 In dedicated config files
5. 进入根文件（也就是刚刚创建文件的文件）：cd filename
6. 运行文件：npm run serve
   注：后面两步 当你创建完文件后可见

走项目流程

• package.json
  • 项目是如何启动的
    • @vue/cli-service这个包来启动项目的
      • webpack.config.js文件
• 入口文件
  • 项目中如何执行其他文件的
    • main.js
      • App.vue 单文件组件 一个文件就是一个组件
        • template 【 必须 】
        • script
        • style
  • assets下东西如何使用？
  • App组件中引用其他组件

单文件组件的使用

• 文件的创建
  • 命名 - 大驼峰命名法
    • 有文件夹
      • index.vue
      • 其他文件是大驼峰命名法
    • 没有文件夹的
      • 大驼峰命名法
• 单文件组件的组成部分
  • template
  • script
  • style [ stylus ]
    • stylus
      • 它的语法和sass基本一致
      • 它去掉了css样式中的符号
      • 它严格要求缩进
    • scope
      • 对定了一个作用域，表示这个样式作用在当前组件中，如果不写就会成全局样式

assets

• 它是开发环境下的静态资源目录，这个目录会被webpack编译
• 举例： 图片
  • 如果图片>4K 那么它会将这个图片拷贝到dist下，但是会给这个图片名称后面加一个hash值
    • hash值，可以防止图片覆盖
  • 如果图片<4K，那么这个图片会被编译为base64格式的图片
    • base64就是使用一串字符来代表一个图片的路径

关于背景图片

• 背景可以使用assets下的或是pulic下的图片

cli4 webpack配置在node_modules下的@vue / cli-service 这里 ,如果我将来要修改呢？

• 解决： 使用覆盖性文件 vue.config.js

vue.config.js

• 这个文件的创建是在项目根目录的
• 配置文件一旦修改，项目必须重启
  cli 它是 webpack + es6模块化来集中实现的

es6模块化

---

模块的定义 const obj = {} const fn = function(){}

模块的导出 // 模块的导出有两种形式 export default //默认导出一个

//export // 批量导出，导出多个

模块的引入 // 如果是export default 导出 import xxx from ‘…/xxx.xx’

// 如果是export 导出

improt { xx } from ‘…/xx.xx’ || import * as xx from ‘…/xx.xx’