vue.js 开发的标准工具 用于Vue的项目快速构建

vue项目的快速构建工 as [脚手架] 底层是webpack

  1. node版本要求
    1. 最好v10以上
    2. node -v 检测版本
  2. 安装
    1. $ cnpm i @vue/cli -g
      1. 检测是否安装成功:$ vue —version
  3. 创建项目
    1. vue create 项目名
  4. yarn的处理
    1. yarn是facebook出品的版本管理工具,和npm/cnpm都是一样的工具
    2. 速度比npm快,安全度和稳定度比cnpm好
    3. 可以将项目中的插件的版本进行锁定
    4. 安装
      1. $ cnpm i yarn -g
  5. 项目的操作指令
    1. yarn server 开发环境下启动项目
      1. local本地访问
      2. 局域网访问
    2. yarn build 生产环境压缩打包项目,供项目上线使用
      1. 生成一个 dist目录
    3. yarn lint 检测js语法规范
  6. 目录介绍

    1. dist 生产环境打包后的资源存放目录
    2. node_modules 放置项目的插件[第三方依赖 [库] ]
    3. public 静态资源
      1. favicon.ico 网页的标题logo
      2. index.html 项目的模板
        1. 提供vue的实例作用的范围容器
        2. 引入一些资源
        3. 建议:不要去操作
    4. src 源代码开发目录[程序员主要工作目录]

      1. assets 静态资源[图片、字体文件]
      2. components 公共组件目录
        1. xxx.vue
      3. App.vue App组件[一个vue文件就是一个组件]
      4. main.ts 项目入口文件
      5. shims-vue.d.ts 类型声明文件

      6. .browserslistrc 浏览器支持说明文件

      7. .eslintrc.js eslint语法规范配置文件
      8. .gitignore git上传代码托管平台的配置文件
      9. bable.config.js 优雅降级配置文件
      10. package.json 项目的记录文件,用于记录
        1. 项目版本
        2. 项目是否私有
        3. 项目安装了哪些插件
      11. README.md 项目的说明书
      12. tsconfig.json ts的配置文件
      13. yarn.lock 项目中插件的版本锁定文件

node_modules的安装与删除

  1. 安装:yarn
  2. 删除:rm -rf node_modules cmd不能使用

Mac 安装vue/cli报错或安装成功找不到vue