//檢查是否有node.js npm vue
win+r 輸入cmd 輸入node -v 回車 會出現node,js的版本
輸入npm -v 回車 會出現npm的版本
輸入vue -v 回車 會出現vue的版本
2.安裝vue:
[plain]view plain
copy
npm install -g vue-cli
//-g表示全域性安裝,vue-cli是模組,全域性安裝的模組可以在命令列直接使用
由於npm**在國內速度非常慢,所以可以在命令後面加上**的映象
即:npm install -g vue-cli --registry=
之後,可以vue --v檢視vue是否安裝好,出現版本號即安裝成功。
3.接下來是建立專案框架
如果想放到指定的目錄下,先進入這個目錄在執行建立專案的命令
例如: e:回車 //進入e盤
cd test回車 //進入e盤的test資料夾
e:\test\vue init webpack my-vue //建立乙個基於"webpack"的專案,後面是專案名
依次按照提示輸入,專案名、專案描述、專案作者等等,
然後一路回車 看到最後這句專案就建立好了。
to get started:
就是告訴你接下來該做什麼,依次完成下面3行命令就可以了。進入my-vue專案-----安裝npm依賴-----執行專案
以下為此3步的詳解
cd my-vue
在my-vue檔案下看到專案結構:
注:這是安裝了依賴以後的截圖,沒安裝依賴以前是沒有node_modules資料夾的
4.安裝專案依賴
生成了專案以後是不能直接執行的,現在很多專案都依賴許許多多的模組,需要逐一安裝依賴。
ctrl+c 停掉剛生成專案的命令,cd my-vue 進入專案跟目錄, 用命令npm install 安裝
若安裝緩慢同樣可以使用**映象
即輸入命令:npm install --registry=
當這個命令執行完成以後會多出乙個node_modules資料夾,裡面就是專案所需的所有依賴
可以看到有很多模組,這些模組都是在package.json檔案裡定義好了的.
5.執行測試
[plain]view plain
copy
npm run dev
出現如下紅色框框表示啟動完成,一般流覽器會自動跳轉出介面http://localhost:8080/,也可以手動開啟流覽器器輸 入位址。
瀏覽器介面截圖:
這樣專案就搭建完成了。
建立Vue專案的步驟
第一步 對於要建立專案的工作目錄,要先進性管理,命令 npm init y 第二步 初始化webpack 包,命令 vue init webpack 自定義名稱 第三步 在components 檔案中建立元件。在建立元件時要對頁面布局進行乙個規劃,可以分為頭部,底部,內容三部分。在各個部分定義元件 ...
vue2 0使用 1 建立新專案
vue版本 2.2.2 1.全域性安裝vue命令列工具 npm install g vue cli 2.建立乙個基於webpack模板的新專案 vue init webpack my project 注 跟 npm init 類似,輸入一系列專案描述與配置,可以不用配置eslint和單元測試框架。3...
使用VUE2 0構建webpack專案
1 vue構建webpack專案需要依賴於node 和npm 需要先安裝。輸入node v回車 會出現node版本號 輸入npm v回車 會出現npm版本號 2 安裝vue npm install g vue cli g表示全域性安裝,vue cli是模組 或者使用 映象 npm install r...