Title: SC-Vue
Author: Patrick Lai
Published: <strong>2020 年 5 月 16 日</strong>
Last modified: 2021 年 6 月 4 日

---

搜尋外掛

這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個
外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。

![](https://s.w.org/plugins/geopattern-icon/sc-vue.svg)

# SC-Vue

 由 [Patrick Lai](https://profiles.wordpress.org/scoop082110/) 開發

[下載](https://downloads.wordpress.org/plugin/sc-vue.1.0.1.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/sc-vue/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/sc-vue/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/sc-vue/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/sc-vue/#developers)

 [技術支援](https://wordpress.org/support/plugin/sc-vue/)

## 外掛說明

SC-Vue provides a shortcode to inject [Vue.js](https://vuejs.org/) apps
 into WordPress
pages and posts. For example, the following shortcode would inject the ‘demo_posts’
app:

    ```
      [pl2010_vue app="demo_posts"/]
    ```

An app is made up of two files, index.js and index.html. They reside
 in a subdirectory
bearing the app’s name under the ‘apps’ directory in the plugin. For the ‘demo_posts’
app, that means:

 * _WP\_PLUGIN\_DIR_/sc-vue/apps/demo_posts/index.js
 * _WP\_PLUGIN\_DIR_/sc-vue/apps/demo_posts/index.html

The index.js Javascript file sets up an initialization function for
 creating a 
Vue model. That model controls a <div> DOM element that SC-Vue renders; the content
of that <div> comes from index.html.

See apps/demo_01 and apps/demo_02 for simple examples of index.js
 and index.html.
For a more complex and realistic example that uses [webpack.js](https://webpack.js.org/)
to packs Javascript and styles into a single index.js, see apps/demo_posts. Additional
details may be found in the documentation of the shortcode function in init.php.

## 安裝方式

 1. Upload the plugin files to the ‘_WP\_PLUGIN\_DIR_/sc-vue’
     directory, or install
    the plugin through the ‘Plugin’s screen in WordPress.
 2. Activate the plugin.
 3. Install any additional Vue app in ‘_WP\_PLUGIN\_DIR_/sc-vue/apps’.
     Note that app
    name must be simple identifier that begins with a letter followed by any number
    of digits, letters, and the underscore.
 4. Startg using shortcode `[pl2010_vue app="..."/]`!

## 常見問題集

### Does this work with WordPress version X?

This plugin is developed on WordPress 5.4. It has not been tried on any
 other version.

### Does this work with PHP 5.x?

This plugin is developed with PHP 7.x. Backporting to PHP 5.x
 should not be difficult
however.

## 使用者評論

![](https://secure.gravatar.com/avatar/54811961d3b23e8ab6c0dae58cd00ce1b7eaddb534ab5017dcea4f8577d0052e?
s=60&d=retro&r=g)

### 󠀁[Hey thanks, for uploading this plugin.](https://wordpress.org/support/topic/hey-thanks-for-uploading-this-plugin/)󠁿

 [apesyntax](https://profiles.wordpress.org/apesyntax/) 2021 年 9 月 10 日

I have a question, how can we reference a file from the js folder into our index.
js file? I want to test some things but I am having this small issue, like how should
I type the location for the folder, example: import {fullnames} from ‘./importingVarTest.
js’; I still haven’t got the hierarchy, it would be great if is possible, if not
do I just have to use the index.js file for all the js?

 [ 閱讀全部 1 則使用者評論 ](https://wordpress.org/support/plugin/sc-vue/reviews/)

## 參與者及開發者

以下人員參與了開源軟體〈SC-Vue〉的開發相關工作。

參與者

 *   [ Patrick Lai ](https://profiles.wordpress.org/scoop082110/)

[將〈SC-Vue〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/sc-vue)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/sc-vue/)、查看
[SVN 存放庫](https://plugins.svn.wordpress.org/sc-vue/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/sc-vue/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/sc-vue/)。

## 變更記錄

#### 1.0

 * First version published.

## 中繼資料

 *  版本 **1.0**
 *  最後更新 **5 年前**
 *  啟用安裝數 **30+**
 *  WordPress 版本需求 ** 5.4 或更新版本 **
 *  已測試相容的 WordPress 版本 **5.7.15**
 *  PHP 版本需求 ** 7.0 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/sc-vue/)
 * 標籤:
 * [vue](https://tw.wordpress.org/plugins/tags/vue/)
 *  [進階檢視](https://tw.wordpress.org/plugins/sc-vue/advanced/)

## 評分

 5 星，滿分為 5 星

 *  [  1 個 5 星使用者評論     ](https://wordpress.org/support/plugin/sc-vue/reviews/?filter=5)
 *  [  0 個 4 星使用者評論     ](https://wordpress.org/support/plugin/sc-vue/reviews/?filter=4)
 *  [  0 個 3 星使用者評論     ](https://wordpress.org/support/plugin/sc-vue/reviews/?filter=3)
 *  [  0 個 2 星使用者評論     ](https://wordpress.org/support/plugin/sc-vue/reviews/?filter=2)
 *  [  0 個 1 星使用者評論     ](https://wordpress.org/support/plugin/sc-vue/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/sc-vue/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/sc-vue/reviews/)

## 參與者

 *   [ Patrick Lai ](https://profiles.wordpress.org/scoop082110/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/sc-vue/)

## 贊助

想要支援這個外掛的發展嗎？

 [ 贊助這個外掛 ](https://www.paypal.me/scoop082110)