Node | vue | Hello World

• Download
• Hello World

Download

很詳細的安裝過程

Node.js 安装配置

# 檢查安裝版本
$ npm -v

pycharm配置node.js

【pycharm配置node.js】-博文推荐-CSDN博客

Hello World

• 專案建置
• 檔案結構
• npm scripts

專案建置
這邊專案資料夾名稱，不會影響到後面的套件名稱(所以可自行取名)

$ vue create vue-test

檔案結構

dist/
docs/
src/
    components/
        address.vue
        index.js
    main.js
    App.vue
package.json

dist：打包成 npm 所輸出的 js 檔
docs：打包給 github 展示 demo page
components 裡的 index.js 檔很重要，這裡是打包成 npm 的入口檔案，而 App.vue 和 main.js 都是 demo page 的元件
package.json：打包成 npm package 最主要的依賴來源

npm scripts

運行(package.json/scripts)

# 列出所 npm scripts腳本命令(可運行的命令)
$ npm run

ex: package.json

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

運行

npm run serve

npm scripts 使用指南

build 打包

$ npm run build

我的第一個 npm 套件：把 vue component 打包到 npm 吧