Vue-cli脚手架

安装

目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程

  • 全局安装命令
    • yarn global add @vue/cli
      npm install -g @vue/cli
  • 查看vue脚手架版本
    • vue --version

总结: 如果出现版本号就安装成功, 否则失败

创建项目

目标: 使用vue命令, 创建脚手架项目
注意,路径上不要有vue名字的文件夹, 项目名不能带中文和特殊符号

  • 创建项目
    • cmd：vue create 项目名称
      • 注意⚠️：如果使用git bash创建项目，不能上下选择选项，使用如下命令创建winpty vue.cmd create 项目名字
    • 选择模板==可以上下箭头选择, 弄错了ctrl+c重来
    • 回车等待生成项目文件夹+文件+下载必须的第三方包们
    • 进入脚手架项目下, 启动内置的热更新本地服务器
      • cd vue-start
      • npm run serve
    • 运行成功后，复制地址到浏览器，就可以查看项目页面效果
  • 创建项目会创建好目录，自动生成vue项目的基础代码
  • 自动安装好所有的npm依赖
  • 自动初始化git版本控制，默认会有一个master分支

vue单文件组件说明

目标: 一个.vue文件就是一个组件（页面）, 后续开发vue项目，所有的功能都是基于组件实现。
格式：.vue
基本组成：template+script+style

  1. <template>
  2.   // html结构
  3.   // 这里写跟组件 vue2只能有一个跟组件，剩下的可以嵌套
  4.   // vue3支持写多个跟组件
  5. </template>
  7. <script>
  8.   // 写js逻辑
  9.   export default {
  10.   }
  11. </script>
  13. <style>
  14.   css样式
  15. </style>

vue.config.js文件

目标：了解vue.config.js作用：覆盖webpack默认配置

  1. const { defineConfig } = require('@vue/cli-service')
  2. /* 覆盖webpack的配置 */
  3. module.exports = defineConfig({
  4.   // IE兼容性配置
  5.   transpileDependencies: true,
  6.   // 关闭eslint检查,一般给true表示让eslint检查，但不会造成编码报错
  7.   lintOnSave: false,
  8.   // 自定义服务配置
  9.   devServer: {
  10.     port: 8000,
  11.     open: true
  12.   }
  13. })

vue-cli 项目目录分析与清理

目标: 了解初始项目文件夹和文件含义, 删除一些以后不需要的
vue-start # 项目目录
├── node_modules # 项目依赖的第三方包
├── public # 静态文件目录
├── favicon.ico# 浏览器小图标
└── index.html # 单页面的html文件(网页浏览的是它)
├── src # 业务文件夹=》写代码
├── assets # 静态资源
└── logo.png # vue的logo图片
├── components # 组件目录
└── HelloWorld.vue # 欢迎页面vue代码文件
├── App.vue # 整个应用的根组件
└── main.js # 入口js文件
├── package.json # 描述项目及项目依赖
├── package-lock.json # 项目包版本锁定和下载地址
├── .gitignore # git提交忽略配置
├── babel.config.js # babel配置
├── jsconfig.json # js编译和别名提示配置
├── README.md # 项目说明
└── vue.config.js # vue-cli配置

  • src/App.vue默认有很多内容, 可以全部删除
  • assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)