# install vue-cli 3.0, webpack
:::success

$ sudo npm install -g @vue/cli
$ vue --version
3.8.2
//你需要全域安裝來使用 webpack 大部分的功能：
$ sudo npm install -g webpack 

//然而 webpack 有些功能，像是優化的 plugins，需要你將它安裝在本機。像這種情況下你需要：
$ sudo npm install --save-dev webpack 

:::

# 建立 Vue.js 專案項目t

[root@localhost ~]# vue create hello-world

如果下載太久改成以下

[root@localhost ~]# vue create hello-world -d -r http://r.cnpmjs.org

Vue CLI v3.4.0
# 選取要 preset (預先裝置) 的特性，defaule 包含了基本的 Babel + ESLint preset，這裡選 Manually 來手動選取需要的特性
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

# 選取要安裝的特性
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

# Vue Router 的 mode (模式) 使用 'history' (另一種 mode 為 'hash'，會在 URL 加上 '#' 符號)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

# CSS 預處理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

# ESLint 協助讓你寫的程式符合規範的輔助工具，區分嚴謹程度
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
❯ ESLint + Standard config
  ESLint + Prettier

# 代碼檢查時機
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save  # 存檔時
 ◯ Lint and fix on commit (requires Git)  # 提交更新時

# 在哪為特性進行配置
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

# 是否將上述配置儲存到 preset 的 default (就是一開始那)
? Save this as a preset for future projects? (y/N) N

# ... 以上省略 ... (構建中)

# 專案項目 'hello-world' 建立成功
   Successfully created project hello-world.
   Get started with the following commands:

# 執行這兩個指令，可以運行專案項目
 $ cd hello-world
 $ npm run serve

# vue 專案中加入 vuetify, vue-echarts
:::success
Project 中加入 vuetify 插件

$cd project_dir
$vue add vuetify

$npm install echarts vue-echarts

:::

使用 vue-echarts

import Vue from 'vue'
import ECharts from 'vue-echarts' // refers to components/ECharts.vue in webpack
 
// import ECharts modules manually to reduce bundle size
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
 
// If you want to use ECharts extensions, just import the extension package and it will work
// Taking ECharts-GL as an example:
// You only need to install the package with `npm install --save echarts-gl` and import it as follows
import 'echarts-gl'
 
// register component to use
Vue.component('v-chart', ECharts)