方法:先安裝node和cnpm;然後用「npm install --global vue-cli」指令安裝vue-cli;接著以「vue init webpack 專案名」指令建立專案;最後進入專案目錄,用“cnpm i”指令安裝依賴。
相關推薦:《vue.js教學》
本教學操作環境:windows7系統、vue2.9版本,Dell G3電腦。
一、安裝node環境
# 1、下載網址為:https://nodejs.org/en /
2、檢查是否安裝成功:如果輸出版本號,說明我們安裝node環境成功
# 3、為了提高我們的效率,可以使用淘寶的鏡像:http://npm.taobao.org/
輸入:npm install -g cnpm –registry=https://registry.npm.taobao.org
,即可安裝npm鏡像,以後再用到npm的地方直接用cnpm來代替就好了。
檢查是否安裝成功:
#二、建置vue專案環境
1、全域安裝vue-cli
<span class="line">npm install --global vue-cli</span>
# #
2、進入你的專案目錄,建立一個基於webpack 範本的新專案: vue init webpack 專案名
說明:
Vue build ==>## Vue buil 打包方式,回車即可;
##gt; ## Install vue-router ==> 是否要安裝vue-router,專案中肯定要使用到所以Y 回車; Use ESLint to lint your code ==>檢測目前是否需要語法我們不需要所以n 回車; Set up unit tests ==> 是否安裝單元測試工具目前我們不需要所以n 回車; Setup2e tests with Nightn====sd ; 是否需要端對端測試工具目前我們不需要所以n 回車; 3、進入專案:cd vue-demo,安裝相依性 #安裝成功後,專案資料夾中會多出一個目錄: node_modules4、npm run dev,啟動專案
## 專案啟動成功:
三、vue專案目錄解說
<br>
1、build:建立腳本目錄
1)build.js ==> 生產環境建構腳本;<br>
## 2)check-versions.js
〠2)check-versions.js 〠2)ch ==, node.js版本;
3)utils.js ==> 構建相關工具方法;
4)vue-loader.conf .js ==> 設定了css載入器以及編譯css之後自動加入前綴;
## 5)webpack.base.conf.js ==> webpack基本設定;
6)webpack.dev.conf.js ==> webpack開發環境配置;
7)webpack.prod.# 7)web=conf.
#pack => webpack生產環境配置;2、config:專案配置######
1)dev.env.js ==> 發展環境變數;
2)index. )prod.env.js ==> 生產環境變數;
3、node_modules:npm 載入的專案依賴模組
4、src:這裡是我們要開發的目錄,基本上要做的事情都在這個目錄裡。裡麵包含了幾個目錄及文件:
1)assets:資源目錄,放置一些圖片或是公共js、公共css。這裡的資源會被webpack建構;
2)components:元件目錄,我們寫的元件就放在這個目錄裡面;
3)router:前端路由,我們需要設定的路由路徑寫在index.js裡面;
4)App.vue:根元件;
5)main.js:入口js檔;
## 5、static:靜態)main.js:入口js檔案;## 5、static:靜態:靜態資源目錄,如圖片、字體等。不會被webpack建構
6、index.html:首頁入口文件,可以添加一些meta 資訊等
7、package.json:npm套件設定文件,定義了專案的npm腳本,依賴套件等資訊
<br>
8、README.md:專案的說明文檔,markdown 格式
9、.xxxx檔案:這些是一些設定檔,包括語法配置,git配置等
更多程式相關知識,請造訪:
程式入門以上是怎麼創建vue.js項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!