VSCode 開發Vue + ElementUI

開發環境

VSCode
Node.js
vue-cli
Vue3.X
安裝好node.js並配置好環境,然后用npm安裝vue cli（npm install -g @vue/cli）。

VSCode安裝Vue開發用插件

中文語言包：Chinese (Simplified) Language Pack for Visual Studio Code
VUE插件：Vetur
Vue模板語言插件（快速生成vue代碼塊）：Vue VSCode Snippets
VS目錄文件夾圖標：vscode-icons

VSCode 通過Vue-cli 模板創建項目

打開VSCode，打開終端，進入到目錄：D:\VScodeWorkspace，輸入vue create hello-world (安裝yarn后,創建項目可以用yarn代替npm)：

勾選 Vue版本選擇、Babel（JavaScript編譯器）、CSS預處理器、Vuex和Vue Router

CSS預處理器有sass、less、stylus三種，這里選擇sass。

cd hello-world，執行 npm run serve啟動

安裝ElementUI

ElementUI
https://element.eleme.cn/#/zh-CN/component/installation
element-plus
https://element-plus.org/zh-CN/guide/installation.html

# 基於 Vue 2.X的ElementUI安裝
npm i element-ui -S

# 基於 Vue3.X的element-plus安裝
vue add element-ui
npm install vue-cli-plugin-element-plus

引用ElementUI

全局引入

main.js中引入elementui插件和樣式,並全局注入ElementUI

import Vue from 'vue'
import App from './App.vue'
//引用elementui插件
import ElementUI from 'element-ui';
//引用elementui 樣式
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

// ElementUI全局注入到Vue項目中
Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

使用

修改HelloWorld.vue中內容，參考官網添加。

<template>
  <div class="hello">
    {{msg}}
    <el-button>按鈕</el-button>
    <el-button type="primary">主要按鈕</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

遇到的問題

vue : 無法將“vue”項識別為 cmdlet、函數、腳本文件或可運行程序的名稱。請檢查名稱的拼寫，如果包括路徑，請確保路徑正確，然后再試一次

cmd窗口可以運行vue命令，但是終端窗口就不行，需要把終端刪除掉新建一個終端即可。

vue : 無法加載文件 D:\XXX\node-v16.13.2-win-x64\node_global\vue.ps1，因為在此系統上禁止運行腳本

原因：首次在計算機上啟動 Windows PowerShell 時，現用執行策略很可能是 Restricted（默認設置，Get-ExecutionPolicy查看狀態）。Restricted 策略不允許任何腳本運行，防止執行不信任的腳本。
解決辦法：
以管理員身份運行vscode，輸入命令
set-executionpolicy remotesigned