怎麼用webstrom使用vue-cli創建項目

1、什麼是vue-cli

CLI（command line interfaces ）命令行接口。在進行Vue項目開發時，可以選擇不同的Vue模板進行項目的搭
建，比如simple、webpack-simple、webpack、browserify/browserify-simple等；vue-cli是官方提供的一個腳
手架（預先定義好的目錄結構及基礎代碼，咱們在創建 Maven 項目時可以選擇創建一個骨架項目，這個骨架項目就是腳
手架），用於快速生成一個 vue 的項目模板。

 2、安裝node.js和vue-cli

• 下載安裝node.js   https://nodejs.org/en/download/
• 在node.js的cmd組件（command prompt）中安裝vue-cli

如果npm命令太慢了，可以使用淘寶鏡像http://npm.taobao.org/ ，此時使用cnpm代替npm

# 1. 安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 2. 使用cnpm代替npm
cnpm install
cnpm run dev
cnpm run build

3、安裝webpack 

 

cnpm install webpack-cli -g 

4、用webstorm創建vue-cli項目 

file --> new --> project , 選擇vue.js, 然後配置項目路徑 ，node.js的執行路徑 ， vue-cli 的安裝路徑。

 

 

當所有安裝包下載完成之後我們就可以啓動我們的項目了

 

如果npm install太慢，我們在控制檯中輸入

cnpm install

 

 5、運行項目 

先點擊Run —> 配置 -->apply

 

6、項目目錄介紹

 接下來，我們對vue-cli中的各個項目進行分析，方便我們以後的開發中能夠更好的進行管理