Vue入門——Vue-CLI 4.X腳手架搭建
0.前言
Vue CLI是一個基於Vue.js進行快速開發的完整系統。
1.下載node.js
Vue CLI需要Node.js 8.9或更高版本(推薦8.11.0+)
我之前搭建hexo博客下載過了,查看node版本:
node -v
2.安裝Vue CLI
cnpm install -g @Vue/cli
查看Vue CLI版本:
vue -V
3.切換至工作文件目錄並創建項目
我在D盤下的建了個vue文件夾,切換至該目錄並創建一個項目,名爲hellovue:
vue create hellovue
4.運行hellovue
切換至hellovue項目的目錄下,運行該項目
npm run serve
通過localhost:8080/
訪問結果如下:
5.bulid打包Vue項目
我這個Vue CLI4.2.3默認沒有bulid腳本,在項目根目錄新建一個vue.config.js
// vue.config.js
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config => {
//路徑配置
config.resolve.alias
.set('assets', resolve('src/assets'))
.set('styles', resolve('src/assets/styles'))
},
// webpack-dev-server 相關配置
devServer: {
// 調試端口
// port: 8989
},
//解決index空白 路徑publicPath: "./",
publicPath:"./",
//其他配置....
}
其中publicPath:"./",解決了bulid後訪問index爲空白的情況:
//解決index空白 路徑publicPath: "./",
publicPath:"./",
打包命令,執行後項目根目錄就有一個dist文件。
npm run bulid