Vue cli搭建vue基礎專案

目錄

一、引言

二、專案建立

1、安裝node

2、全域性安裝cnpm

3、全域性安裝webpack和webpack-cli

4、全域性安裝vue-cli

5、使用vue-cli建立專案

6、開發執行專案

7、打包發布專案

8、除錯工具外掛程式

三、總結

首先必須明確vue-cli是什麼，就是乙個腳手架，為了方便使用建立webpack專案，這個專案包含了已經配置好的vue，vue-cli依賴webpack。

那麼webpack是什麼，是前端資源模組化管理和打包工具，將所有檔案都會當作模組載入，進行整合壓縮，處理成瀏覽器可以直接解析的小而規律的檔案。

下圖是對webpack一些簡單的認識

npm install -g cnpm --registry=

cnpm install webpack webpack-cli -g

webpack -v

終於進入正題安裝vue-cli了

cnpm install -g vue-cli

vue -v

5.1建立空資料夾，執行

vue init webpack vue-demo

? project name vue-demo # 專案名稱，直接回車，按照括號中預設名字（注意這裡的名字不能有大寫字母，如果有會報錯sorry, name can no longer contain capital letters），阮一峰老師部落格為什麼檔名要小寫 ，可以參考一下。

? project description a vue.js project # 專案描述,隨便寫
? author # 作者名稱
? vue build standalone # 我選擇的執行加編譯時
runtime + compiler: recommended for most users
? install vue-router? yes # 是否需要 vue-router，路由肯定要的
? use eslint to lint your code? yes # 是否使用 eslint 作為**規範.
? pick an eslint preset standard # 一樣的eslint 相關
? set up unit tests yes # 是否安裝單元測試
? pick a test runner 按需選擇 # 測試模組
? setup e2e tests with nightwatch? 安裝選擇 # e2e 測試
? should we run `npm install` for you after the project has been created? (recommended) npm

執行下面的命令，執行程式

npm run dev

直接就能在瀏覽器中看到介面啦。。。

執行下面的命令，打包程式到dist資料夾，與npm run dev類似，實際執行的命令為上圖中的build內容。

npm run build

這裡有時候我們不放到web伺服器根路徑，訪問localhost:port/專案資料夾  會訪問不到，這個時候我們要修改index.js資料夾中的配置assetspublicpath，然後就可以了。

chrome中有除錯外掛程式，直接安裝

vue cli 搭建vue專案

安裝完成後，開啟命令列工具輸入命令node v，如果出現對應版本號，就說明安裝成功了。npm包管理器，是整合在node中的，所以，直接輸入npm v也會顯示出npm的版本資訊。由於npm的有些資源被牆，為了更快更穩定,所以我們需要切換到 的npm映象 cnpm。npm install g cnpm ...

vue cli搭建vue專案

生成依賴 命令 npm install 4.執行命令 npm run dev 5專案打包命令 npm run build 檢測node版本 node v 檢視npm安裝 npm v 解除安裝vue cli2 npm uninstall vue cli g 安裝vue cli3 npm install...

vue cli 搭建vue專案

前提搭建好nodejs環境 vue cli是vue.js的腳手架，用於自動生成vue.js webpack的專案模板，建立命令如下 vue init webpack 注1 為自己建立專案的名稱 注2 必須先安裝vue,vue cli，webpack，node等一些必要的環境 命令 npm insta...