Idea初始化Vue項目

環境搭建

檢測是否安裝好nodejs和npm

node -v
npm -v

如果沒有安裝需要先安裝node

nodejs的下載路徑：https://nodejs.org/en/download/

在Windows上安裝時務必選擇全部組件，包括勾選Add to Path。

安裝完成后，打開命令提示符重新檢查版本。

安裝vue.js

打開cmd，輸入：npm install vue

安裝vue-cli，vue腳手架

npm install -g @vue/cli

測試是否安裝成功

vue -V

使用taobao鏡像

在cmd中直接使用npm來安裝的一些工具的話會比較慢，所以我們使用淘寶的npm鏡像：

方法一：輸入

npm i -g cnpm --registry=https://registry.npm.taobao.org

即可安裝npm鏡像，以后再用到npm的地方直接用cnpm來代替就好了 ，如果權限不夠，請使用管理員運行命令提示符

方法二：[推薦]

npm config set registry https://registry.npm.taobao.org

設置npm代理，后續直接使用npm install 即可；

使用idea新建vue項目

如果沒有vue.js選項，idea安裝vue.js的插件即可

使用vue init webpack projectName初始化項目

projectName是項目名。

接下來會要求你進行一些選項設置，其實就是初始化項目：

? Project name (test)        // 項目名稱
? Project name test
? Project description (A Vue.js project)        // 項目描述
? Project description A Vue.js project
? Author (villelee)        // 作者
? Author villelee
? Vue build (Use arrow keys)        // 開始選項設置
? Vue build standalone
? Install vue-router? (Y/n) Y        // 安裝路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) Y        // 是否使用ESlint統一代碼風格
? Use ESLint to lint your code? Yes
? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)
? Pick an ESLint preset Airbnb
? Set up unit tests (Y/n) n        // 是否安裝單元測試
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n        // 是否安裝e2e測試
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
   vue-cli · Generated "test".

最后出現如下代碼:

To get started:

  cd test
  npm run dev

說明已經初始化成功，vue-cli已經將必要的依賴包都下好了，可以正常跑起來了。

$ npm run dev

> test@1.0.0 dev D:\ptest\test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting DONE  Compiled successfully in 5547ms11:59:13

 I  Your application is running here: http://localhost:8080

相關錯誤處理

Can not install 'ij-rpc-client': npm ERR! code ECONNRESET

詳細信息如下：

Can not install 'ij-rpc-client': npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network request to https://registry.npmjs.org/ij-rpc-client failed, reason: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\LJ\AppData\Roaming\npm-cache_logs\2019-11-03T08_31_08_260Z-debug.log

解決辦法：

清除、卸載vue緩存
 npm uninstall -g vue 
 npm uninstall -g vue-cli 
 npm uninstall -g @vue/cli 
 npm cache clean --force 

重新安裝 
npm install vue
npm install -g @vue/cli

**重點**
查詢、更改npm下載地址
npm get registry https://registry.npmjs.org/ 
npm config set registry http://registry.npm.taobao.org/ 
npm get registry http://registry.npm.taobao.org/

vue init webpack projectName 報錯

錯誤信息：'git' 不是內部或外部命令，也不是可運行的程序或批處理文件

下載安裝git
配置git環境變量，將git命令路徑添加到PATH，如：C:\Program Files\Git\bin