2024-03-28

Vue2 安裝與Vue Cli

對於製作原型或學習，你可以這樣使用最新版本：

1	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue2 </title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

測試

安裝vue-cli

node 版本 12.13.0 或 14.17.0
Vue CLI 4.x 安裝

nvm use 14.17.0
npm install -g @vue/cli
# OR
yarn global add @vue/cli

// 檢查版本
vue --version
//@vue/cli 5.0.8

? Project name vue2_project
? Project description A Vue.js project
? Author lara huang xxxxxxxxxx@gmail.com
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (recom
mended) npm
Yes, use NPM

cd 檔案夾名稱
開發中啟動

1	npm run dev

github

參考資料

Vue文件 & 安裝 Vue CLI