webstorm+vue初始化專案
vue新專案準備:
1、安裝nodejs,官網下載傻瓜安裝
node -v 驗證
2、npm包管理器,是整合在node中的,所以安裝了node也就有了npm
npm -v 驗證
3、安裝cnpm
npm install -g cnpm --registry=http://registry.npm.taobao.org
(完成之後,我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步瞭解cnpm的,檢視淘寶npm映象官網。)
4、安裝vue-cli腳手架構建工具
npm install -g vue-cli 或者 npm install -g @vue/cli
vue新專案構建:
1、初始化專案模板:
vue init webpack-simple yunshi-approve
或者 vue init webpack yunshi-approve
2、安裝npm
cd yunshi-approve
3、安裝專案所需要的依賴:
npm install 或 cnpm install
4、執行看效果:
npm run dev
<--------------------------------------------------------------------------->
介紹一下目錄及其作用:
build:最終釋出的程式碼的存放位置。
config:配置路徑、埠號等一些資訊,我們剛開始學習的時候選擇預設配置。
node_modules:npm 載入的專案依賴模組。
src:這裡是我們開發的主要目錄,基本上要做的事情都在這個目錄裡面,裡面包含了幾個目錄及檔案:
assets:放置一些圖片,如logo等
components:目錄裡放的是一個元件檔案,可以不用。
App.vue:專案入口檔案,我們也可以將元件寫這裡,而不使用components目錄。
main.js :專案的核心檔案
static:靜態資源目錄,如圖片、字型等。
test:初始測試目錄,可刪除
.XXXX檔案:配置檔案。
index.html:首頁入口檔案,可以新增一些meta資訊或者同統計程式碼啥的。
package.json:專案配置檔案。
README.md:專案的說明檔案。
<--------------------------------------------------------------------------->