专案小帮手- Vue CLI

前言

Vue CLI 是用来快速建置 Vue 开发环境的一套工具,它是由 Vue.js 团队所建立的命令列工具。提供 vue 相关的命令执行,例如: vue create建立新专案、vue serve 即时显示开发画面、vue ui图形化介面来管理专案。

Vue CLI是很多不同 Component 组合而成,例如: CLI serviceCLI pluginsweb UI

安装

npm install -g @vue/cli
# 或
yarn global add @vue/cli

确认是否安装成功

vue --version

建立专案

vue create my-project
# OR
vue ui

Vue CLI 版本升级

npm update -g @vue/cli

# 或
yarn global upgrade --latest @vue/cli

神奇指令?

打开 package.json 查查 Vue-CLI 帮我们建立的 script

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

当我们输入 npm run serve 就会去找 script 中的 serve
vue-cli-service 对应到的是专案内中 ./node_modules/.bin/vue-cli-service

还可以看看 Vue-CLI 帮我们安装的套件

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },

Vue CLI Service?

一个 run-time dependency,提供指令让我们可以启动 Vue 专案,例如servebuildinspect

ex:

vue-cli-service serve
// 启动一个server,能即时更新

vue-cli-service build
// 在dist/ 产生打包档 (JS/CSS/HTML的压缩档)

vue-cli-service inspect
// 检查 webpack 的设定

专案内容 ?

  • public 包含 public 档案,例如 index.html favicon.ico,任何静态档都可以放在这,不会经过 webpack 打包
  • src 原始档案,大部分开发都在这异动
  • src/assets 专案的 assets,例如 logo
  • src/components 放置 Vue 元件
  • src/App.vue 主要的元件
  • src/main.js 应用程序的启动档案
  • babel.config.js Babel 设定档
  • package.json 专案相依套件,ESLint、PostCSS 等相关设定
  • node_modules 所有已安装的套件

参考

A Beginner’s Guide to Vue CLI


下篇预告

  • Vue Router

每日一句:
学一次,用一辈子


<<:  [Day 23] 资料分布与离群值处理

>>:  Flutter基础介绍与实作-Day21 旅游笔记的实作(2)

Day 19 ml5.js 将 tensorflow 模型转换为 ml5 模型

我们可以将电脑的上 tensorflow 模型转换为 ml5 模型,并在浏览器上执行。 这代表我们可...

每日挑战,从Javascript面试题目了解一些你可能忽略的概念 - Day8

tags: ItIron2021 Javascript 前言 昨天我们探讨了undefined、nu...

EP 28: Shell Routing for TopStore App

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~ 本篇是 Re: 从零开始用 Xamarin 技...

Day 11 - 密码攻击方式

出於书本 Chapter 7. Passwords 如果只是因为测试的目的要进行密码破解,记得要考虑...

[Day18] - 在 React 中引用现成的 Web Component

当我们拿到一个现有的 Web Component 时 , 如何在 React 专案中引用呢 ? 利用...