npm安裝vue建立一個helloworld程式
阿新 • • 發佈：2020-09-02
引用cdn的方式我們就不說了
這裡我們使用npm安裝vue
使用命令，初始化npm倉庫
npm init
安裝webpack開發時依賴
npm install webpack --save-dev
安裝vue依賴
npm install vue --save
建立main.js檔案，寫vue程式碼，需要講vue包匯入
import Vue from 'vue'
new Vue({
el:'#app',
data:{
mes:'hello vue!'
}
配置webpack.config.js
const path = require('path')
module.exports = {
entry:'./main.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'bundle.js'
}
}
進行打包
webpack
在瀏覽器裡執行，成功顯示。
可能存在的問題：
網頁中不顯示或者有以下錯誤
原因使用了runtime-only的方式
需要使用runtime-compiler
回到webpack.config.js，新增以下程式碼即可
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}