Published in JAVASCRIPT

3月 26, 2024

終於踏入Javascript框架之Vue..(0)

看似順遂卻有點波折的JS學習之旅，過了幾個月終於要踏入前端框架了

稍微海巡了一下大部分都是選Vue或React，兩三天思考之後決定從vue先下手

希望這個選擇是正確的！

目錄

Vue.js的使用方式與開發環境配置
- 本機端環境:
  - 傳統html/css/js掛載Vue.js
  - 安裝Vue.js
- 線上編輯器
  - Codepen：
  - Repl.it：
參考來源:

Vue.js的使用方式與開發環境配置

使用Vue的方式有幾種：

本機端環境:

傳統html/css/js掛載Vue.js
- index.html檔案在<head>標籤中掛載Vue.js，可以用cdn或下載Vue.js文件的方式

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

- 編輯index.js

//下面是要傳進index的部分
const app= {}

//#app為index.html中，id為#app的位置
Vue.creatApp(app).mount("#app")

安裝Vue.js
1. Node.js
2. npm
3. Step: cmd下進入目標資料夾
4. npm install vue@latest

之後會開始進入設定,包括專案名稱,是否載入各種項目等等

最後完成時會出現提醒畫面,就跟著打上

$ cd (資料夾名稱)

$ npm install

$ npm run dev

接著在vscode安裝vue official套件，這樣畫面就會很清楚啦~

安裝完以後會出現的資料夾：

node_modulus: 執行npm install後出現，執行Vue運行的文件夾
public: (瀏覽器icon)
src: 主要撰寫與儲存code的位置
index.html: 入口文件
assets:靜態文件
package.json: 包含版本...等等各種資訊
main.js:在src底下，用於創建Vue實例

import { createApp } from 'vue'
import App from './App.vue'


const app = createApp(App)

app.use(store)
app.use(router)
app.mount('#app')

線上編輯器

Codepen

Vue提供的模板：有點類似app.js，一個頁面中就包含template, script,style
自行import設定

//html

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

//JS

const { createApp, ref } = Vue

createApp({
  setup() {
    const message = ref('Hello Vue!')
    return {
      message
    }
  }
}).mount('#app')

Repl.it

跟本機端運行的方式差不多，有index.html, App.vue,src資料夾等等

可以看自己熟悉哪種方式!

參考來源: