第一種方式:
1. 下載安裝node.js
檢查是否成功:node-v或npm-v
2..搭建項目:
第一種方法:用iview腳手架建項目
打開iview官網==>生態 ===>iview cli==>進行下載iview腳手架,
下載后進行創建項目
第二種方法:命令行進行創建
(1).npm install -gvue-cli //全局安裝vue-cli
(2).npm install -g webpack //全局安裝webpack
(3).(npm)npm install -gwebpack-dev-server //安裝webpack的本地webserver
(4).npm install --save iview //下載iveiw組件庫
(5).npm install axios npminstall --save vue-axios //下載axios
(6).cnpm install element-ui --save
(7).vue initwebpack 項目名 //搭建項目(你想把項目發到那,就切換到那塊下載)

3.切換到你所在的項目,運行項目npm run dev
4.編輯項目時,我建議用HBuilder
5.下載好后,項目如下圖所示:

6.比較關心的的幾個文件:
src下的assets:存放靜態文件
src下的components:寫頁面
src下的router下的index.js:配置路由
src下的main.js:前端的主入口,主要是寫配置。
對於新引進來的東西,需要在index.js和main.js下引用才方可使用。
如果覺得npm速度不快,可下載cnpm
(npm install -g cnpm-registry=http://registry.npm.taobao.org)
第二種方式:
1.檢測是否安裝好nodejs和npm
檢測命令
node -v
npm -v
如果沒有安裝需要先安裝
nodejs的下載路徑:https://nodejs.org/en/download/
在Windows上安裝時務必選擇全部組件,包括勾選Add toPath。
安裝完成后,在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鏡像
2.安裝vue-cli,vue腳手架
使用如下命令
cnpm i -g vue-cli
安裝vue-cli
測試是否安裝成功:vue -V
檢查vue是否安裝成功
3.項目安裝和創建
(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 hasbeen created? (recommended):選擇:No, I will handle thatmyself
(2).初始化項目
進入項目目錄
cd firstVue
初始化項目
cnpm i
項目目錄結構
運行項目
cnpm run dev
瀏覽器打開:localhost:8080,即可打開vue項目
Ctrl+C退出運行
4. 配置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中打包了。
5.安裝使用stylus(是一種健壯的css)
cnpm install --save-dev stylus stylus-loader
