Vue打包最簡單的方法(vue腳手架)

2021-10-22 14:22:57 字數 853 閱讀 4993

使用步驟:

第一步安裝vue-cli

npm i -g @vue/cli
可以在powershell中安裝也可以在vscode中安裝。

安裝完成後

第二步:建立vue專案

建立命令 vue create 專案名字

例子:vue create hello-world

輸入命令後會出現一系列的配置選項

選擇第三個自定義 空格選擇,

第二個是高階轉為低階語法,第五個是router是路由,vuex是狀態管理的工具

css-pre-processors對css一些轉化,linter / formatter 檢查規範

初學vue-cli我們只需要選擇choose vue version、babel、router即可

接下來開始選擇版本目前使用的是vue2x所以選擇vue2x

然後會出現乙個y/n的選項我們選擇n

這個是詢問你選擇是否用無#/的模式

專案建立完成後通過位址開啟

這樣專案就已經建立完成了

VUE課程 2 VUE最簡單例項

1 引入vue.js 3 在模板中使用資料 1 引入vue.js script 2 建立vue物件 el 指定根element 選擇器 data 初始化資料 頁面可以訪問 data 3 在模板中使用資料 模板語法 雙大括號 div 1 doctype html 2 html lang en 3 he...

最簡單易懂的 vue 插槽教程

my slot div test 我是頭部header 我是中間slot 我是尾部footer div template body js 部分 vue.component my slot newvue 上面 註冊了乙個元件,然後在 div 裡渲染這個元件,頁面顯示如下 我是頭部 我是中間 我是尾部 ...

vue專案靜態資源打包方法

如何用.npm run build打包靜態資源 1.開啟build資料夾下的webpack.base.conf.js,如下圖,將紅圈地方改為紅箭頭所指的一行 2.開啟config資料夾下index.js如下圖,將藍箭頭所指改為紅箭頭所指 3.開啟build資料夾下的utils.js如下圖,將圈出的 ...