windows下使用IDEA建立VUE項目

1.環境搭建

1.1檢測是否安裝好nodejs和npm

檢測命令

node -v

npm -v

若是沒有安裝須要先安裝

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

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

安裝完成後，在Windows環境下，請打開命令提示符，

idea cmd窗口

而後輸入node -v，若是安裝正常，你應該看到  版本號 輸出：

檢查nodejs是否安裝成功

npm是Node.js的包管理工具（package manager），Nodejs的安裝程序默認安裝npm，在命令提示符或者終端輸入npm -v，能夠看到相似如下的輸出：

檢查npm

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

輸入npm i -g cnpm --registry=https://registry.npm.taobao.org，便可安裝npm鏡像，之後再用到npm的地方直接用cnpm來代替就行了 ，若是權限不夠，請使用管理員運行命令提示符

安裝淘寶npm鏡像

1.2安裝vue-cli，vue腳手架

使用以下命令

cnpm i -g vue-cli

安裝vue-cli

測試是否安裝成功：

vue -V

檢查vue是否安裝成功

2.項目安裝和建立

2.1安裝項目

首先進入工做目錄（若是不在工做目錄），使用cd 命令

進入工做目錄

使用腳手架安裝項目：

vue init webpack first_vue 

控制檯顯示：

提示目錄已存在，是否繼續：Y

Project name（工程名）:回車

Project description（工程介紹）：回車

Author：做者名

Vue build（是否安裝編譯器）:回車

Install vue-router（是否安裝Vue路由）：回車

Use ESLint to lint your code（是否使用ESLint檢查代碼，咱們使用idea便可）：n

Set up unit tests（安裝測試工具）：n

Setup e2e tests with Nightwatch（測試相關）：n

Should we run `npm install` for you after the project has been created? (recommended)：選擇：No, I will handle that myself

2.1初始化項目

進入項目目錄

cd firstVue

初始化項目

cnpm i

項目目錄結構

運行項目

cnpm run dev

瀏覽器打開：localhost:8080，便可打開vue項目

Ctrl+C退出運行

2.3 配置idea

File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version爲ECMAScript 6，確認

File - Settings - Plugins：搜索vue，安裝Vue.js

Run - Edit Configurations...：點擊加號，選擇npm，Name爲Run，package.json選擇你工程中的package.json，Command爲run，Scripts爲dev,而後就能夠直接在idea中運行了

繼續點擊加號，選擇npm，Name爲Build，package.json選擇你工程中的package.json，Command爲run，Scripts爲build,而後就能夠直接在idea中打包了。

2.4 安裝使用stylus（是一種健壯的css）

cnpm install --save-dev stylus stylus-loader

stylus安裝完畢的效果

做者：開始_終結_老是_沒變改 連接：https://www.jianshu.com/p/be837ce202db 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。