vue cli 搭建vue專案

前提搭建好nodejs環境

vue-cli是vue.js的腳手架，用於自動生成vue.js+webpack的專案模板，建立命令如下：

vue init webpack ***

注1：*** 為自己建立專案的名稱

注2：必須先安裝vue,vue-cli，webpack，node等一些必要的環境

命令：

npm install -g vue-cli

npm install -g webpack

安裝成功後，會出現如下檔案：

d:\initpath

node-v10.
15.3
-win-x64
node_global
vuevue.cmd 
vue-init
vue-init.cmd
vue-list
vue-list.cmd

安裝完成之後開啟命令視窗並輸入 vue -v（注意這裡是大寫的「v」），如果出現相應的版本號，則說明安裝成功。

命令：

npm run dev

注1：專案啟動成功後，開啟瀏覽器輸入「http://localhost:8080」即可

注2：vue-cli構建的專案，在控制台npm run dev啟動後，預設的除錯位址是8080埠的但是大部分時候，

我們都要並行幾個專案開發，很有可能已經占用了8080埠，所以就涉及到如何去更改除錯位址的埠號了

config --> index.js

dev:

, host:
'localhost'
, port:
8083
,// 在這裡修改埠號
autoopenbrowser:
false
, erroroverlay:
true
, notifyonerrors:
true,}
,

build資料夾 這個資料夾主要是進行webpack的一些配置

webpack.base.conf.js webpack基礎配置,開發環境,生產環境都依賴

webpack.dev.conf.js webpack開發環境配置

webpack.prod.conf.js webpack生產環境配置

build.js 生產環境構建指令碼

vue-loader.conf.js 此檔案是處理.vue檔案的配置檔案

config資料夾

dev.env.js 配置開發環境

prod.env.js 配置生產環境

index.js 這個檔案進行配置**伺服器，例如：埠號的修改

node_modules資料夾 存放npm install時根據package.json配置生成的npm安裝包的資料夾

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專案

vue cli搭建vue專案 進入要搭建的檔案目錄下輸入命令開始安裝 網速好，可以用npm 網速差的用 映象cnpm g是全域性安裝 d vuedemo cnpm install vue cli g出現以下介面 可以進行下一步 2.檢視是否安裝成功命令 vue v 注 後面的v 是大寫的 會出現版本...