Vue CLI 是用来快速建置 Vue 开发环境的一套工具,它是由 Vue.js 团队所建立的命令列工具。提供 vue 相关的命令执行,例如: vue create
建立新专案、vue serve
即时显示开发画面、vue ui
图形化介面来管理专案。
Vue CLI是很多不同 Component 组合而成,例如:
CLI service
、CLI plugins
、web 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"
},
一个 run-time dependency,提供指令让我们可以启动 Vue 专案,例如serve
、build
、inspect
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,例如 logosrc/components
放置 Vue 元件src/App.vue
主要的元件src/main.js
应用程序的启动档案babel.config.js
Babel 设定档package.json
专案相依套件,ESLint、PostCSS 等相关设定node_modules
所有已安装的套件每日一句:
学一次,用一辈子
>>: Flutter基础介绍与实作-Day21 旅游笔记的实作(2)
我们可以将电脑的上 tensorflow 模型转换为 ml5 模型,并在浏览器上执行。 这代表我们可...
tags: ItIron2021 Javascript 前言 昨天我们探讨了undefined、nu...
Hello, 各位 iT邦帮忙 的粉丝们大家好~~~ 本篇是 Re: 从零开始用 Xamarin 技...
出於书本 Chapter 7. Passwords 如果只是因为测试的目的要进行密码破解,记得要考虑...
当我们拿到一个现有的 Web Component 时 , 如何在 React 专案中引用呢 ? 利用...