vue全家桶（一） 使用 vue cli 構建專案

2021-09-04 02:32:54 字數 823 閱讀 3009

一.安裝node.js

二.安裝vue-cli

全域性安裝 vue-cli：

npm install -g vue-cli
最新的 vue 專案模板中，都帶有 webpack 外掛程式，所以這裡可以不安裝 webpack。

然後再命令列工具中使用 vue -v （注意 v 大寫）檢視是否安裝成功。

三.用 vue-cli 來構建專案

1.在本地建立乙個資料夾作為專案的存放地，在命令列中進入到專案目錄：

vue init webpack vue-project
其中 webpack 是模板名稱，vue-project 是自定義的專案名稱。

npm install
4.啟動專案

npm run dev
如果瀏覽器開啟之後，沒有載入出頁面，有可能是本地的 8080 埠被占用，需要修改一下配置檔案 config>index.js

開啟http://localhost:8081 就能看到歡迎頁面。

5.打包

npm run build
打包完成後，會生成 dist 目錄，專案上線時，把dist 目錄下的檔案放到伺服器就可以了。

四.寫在後面

VUE複習全家桶

vue基礎考察 一 computed 和 watch vue中watch的簡單應用 二 class和style vue常用方法以及面試問題 三 v if 和 v show vue常用方法以及面試問題 四 父子元件通訊 非父子元件通訊 vue2.0父子元件以及非父子元件如何通訊 五 單個元件生命週期，...

簡述Vue全家桶

vue全家桶有什麼呢？vue全家桶包括vue cli，vue router，vuex，vue devtool除錯工具 ui元件庫。vue cli大家都稱為是vue的乙個腳手架，能快速搭建出乙個單頁應用環境出來，裡面包含著很多的東西，包括有webpack，npm，nodejs，babel等等。vue ...

Vue全家桶構建專案

步驟 一 安裝vue cli 首先，我們可以通過npm安裝vue clic,前提是我們需要有node環境，如果電腦還沒安裝node，先安裝，可通過 node v 查詢node的版本號，有版本號則已經安裝成功 vue全家桶專案構建教程 接下來，我們需要確保電腦已經安裝了webpack，webpack是...