搭建Vue腳手架（vue cli）

1.安裝node.js

安裝完成之後，開啟命令列工具(win+r，然後輸入cmd)，輸入 node -v，如下圖，如果出現相應的版本號，則說明安裝成功。

c:\users\19565>node -v

v12.
13.1
c:\users\
19565>npm -v
6.12.1

2.安裝webpack

開啟命令列工具輸入：npm install webpack -g，(-g代表全域性安裝)

安裝完成之後輸入 webpack -v，如下圖，如果出現相應的版本號，則說明安裝成功。

c:\users\19565>webpack -v

4.42.0

補充：4.0版本以後還要安裝webpack-cli；npm install webpack-cli -g 

安裝完成之後輸入 webpack-cli -v，如果出現相應的版本號，則說明安裝成功。

3.安裝vue-cli腳手架構建工具

開啟命令列工具輸入：npm install vue-cli -g，安裝完成之後輸入 vue -v（注意這裡是大寫的「v」），如下圖，如果出現相應的版本號，則說明安裝成功。

c:\users\19565>vue -v

2.9.6

c:\users\19565>e:

e:\>cd vuestu

2.安裝vue腳手架輸入：vue init webpack pack1 ，注意這裡的「pack1」 是專案的名稱可以說是隨便的起名，但是需要主要的是「不能用中文」。

e:\vuestu>vue init webpack pack1

---------------------這個是那個安裝vue腳手架的命令
?project name pack1
---------------------專案名稱
?project description a vue.js project
---------------------專案描述
?author liuxiaotao
---------------------專案建立者
?vue build standalone
? install vue-router?yes
---------------------是否安裝vue路由，也就是以後是spa（但頁面應用需要的模組）
? use eslint to lint your code?no
---------------------是否啟用eslint檢測規則
?set up unit tests no
? setup e2e tests with nightwatch?no
? should we run `npm install` for you after the project has been created?(recommended) npm
vue-cli · generated "
pack1".
# installing project dependencies ...
to get
started:
---------------------這裡說明如何啟動這個服務
cd pack1
-------------------cd到專案裡面
npm run dev
------------------------執行專案

3.啟動專案

cd 命令進入建立的工程目錄，首先cd pack1（這裡是自己建工程的名字）

e:\vuestu>cd pack1

-------------------cd到專案裡面
e:\vuestu\pack1>npm run dev
------------------------執行專案

localhost:8080

5.停止專案

ctrl + c

6.打包專案

npm run build

參考文章：

一起學習，不足之處，多多指教。。。（下次分析專案層次結構）

搭建VUE腳手架 vue cli

確保node.js和npm cnpm都安裝好的情況下，檢視命令 node v npm v cnpm v,有返回版本號即為安裝成功，npm和cnpm有乙個即可，cnpm是 映象的npm，相對npm更快更穩定，配置命令 npm install g cnpm registry 在用 vue.js 構建大型...

Vue腳手架vue cli搭建

vue腳手架搭建流程 首先在node環境下使用npm或者cnpm進行vue腳手架搭建 1.安裝node環境 安裝成功後在命令列檢視node版本，如果有說明安裝成功。檢視node版本 node v 2.安裝vue腳手架工具vue cli大家在安裝node的時候，會自動安裝npm 可以先行檢視npm版本...

Vue 搭建Vue腳手架（vue cli）

安裝nodejs 我們所需要的npm包管理器，是整合在node中的，所以，直接輸入npm v就會如下圖所示，顯示出npm的版本資訊。vue安裝 在用 vue.js 構建大型應用時推薦使用 npm 安裝，npm 能很好地和諸如 webpack 或 browserify 模組打包器配合使用。vue.js...