Vue脚手架的使用

Vue脚手架的使用

vue-cli脚手架

• Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。
• 文档地址：https://cli.vuejs.org/zh/
• 配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org
• 使用步骤：
  • 安装：npm install -g @vue/cli
  • 创建项目： vue create xxx
  • 启动项目： npm run serve
• Vue脚手架隐藏了所有webpack配置，如果想要看webpack具体的配置，请执行：vue inspect > output.js查看，但是修改没用

vue-cli的图形化操作

安装了vue-cli之后，在命令行输入vue ui，即可进行图形化操作

模板项目的结构

• public
  • favicon.ico : 页签图标
  • index.html ： 主页面
• src
  • assets：存放静态资源
    • logo.png
  • component：存放组件
    • HelloWorld.vue
  • App.vue：汇总所有组件
  • main.js：入口文件
  • .gitignore：git版本忽略配置
  • babel.config.js：babel的配置文件
  • package.json：应用包配置文件
  • package-lock.json：包版本控制文件

全局配置

使用vue-cli创建的项目没有全局的配置文件。vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

// vue.config.js

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  // 选项...
}

具体配置内容可以在vue cli 的网站上查询配置配置参考 | Vue CLI (vuejs.org)