使用Vue創建第一個項目 helloworld

 

先確保安裝了node.js,VsCode，再進行以下操作。

1、新建終端執行

npm install -g vue-cli

npm install -g webpack

如果報錯，

刪除 C:\Users\89452  目錄下的.npmrc文件

再清理下緩存

npm cache clean --force

 

2、安裝完畢，新建一個文件夾用來防止vue項目，然后用終端打開

 

 

 執行  vue init webpack myvue  初始化項目，myvue是項目名字，可以改。

 

可能會報錯：vue : 無法加載文件 D:\nodejs\node_global\vue.ps1，因為在此系統上禁止運行腳本。

解決辦法：

（1）以管理員身份運行VSCode

（2）執行命令：get-ExecutionPolicy（取得shell的當前執行策略）

顯示Restricted（表示狀態是禁止的）

（3）執行命令：set-ExecutionPolicy RemoteSigned

（4）執行命令：get-ExecutionPolicy，顯示RemoteSigned

再繼續執行   vue init webpack myvue

 

這時執行上面顯示的

cd myvue

npm run dev 

再執行      http://localhost:8080

就能看見Vue界面了。 

（ 上面cd后面一定是myvue，這不是你的項目名稱，而是npm自動創建的項目文件夾。）

 

3、打開項目文件夾，目錄解釋：

 

4、修改 App.vue內容為

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Hello Vue and VsCode！'
    }
  }
}
</script>

重新打開

   http://localhost:8080

顯示: