1.環(huán)境搭建
1.1檢測是否安裝好nodejs和npm
檢測命令
node -v
npm -v
如果沒有安裝需要先安裝
nodejs的下載路徑:https://nodejs.org/en/download/
在Windows上安裝時務(wù)必選擇全部組件信柿,包括勾選Add to Path贝奇。
安裝完成后萍桌,在Windows環(huán)境下,請打開命令提示符最盅,
然后輸入node -v,如果安裝正常外盯,你應(yīng)該看到 ?版本號 輸出:
npm是Node.js的包管理工具(package manager)虹钮,Nodejs的安裝程序默認安裝npm,在命令提示符或者終端輸入npm -v而姐,可以看到類似以下的輸出:
在cmd中直接使用npm來安裝的一些工具的話會比較慢腊凶,所以我們使用淘寶的npm鏡像:?
輸入npm i -g cnpm --registry=https://registry.npm.taobao.org,即可安裝npm鏡像拴念,以后再用到npm的地方直接用cnpm來代替就好了 钧萍,如果權(quán)限不夠,請使用管理員運行命令提示符
1.2安裝vue-cli政鼠,vue腳手架
使用如下命令
cnpm i -g vue-cli
測試是否安裝成功:
vue -V
2.項目安裝和創(chuàng)建
2.1安裝項目
首先進入工作目錄(如果不在工作目錄)风瘦,使用cd 命令
使用腳手架安裝項目:
vue init webpack first_vue?
控制臺顯示:
提示目錄已存在,是否繼續(xù):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(測試相關(guān)):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中運行了
繼續(xù)點擊加號遵岩,選擇npm伏蚊,Name為Build,package.json選擇你工程中的package.json膛虫,Command為run草姻,Scripts為build,然后就可以直接在idea中打包了。
2.4 安裝使用stylus(是一種健壯的css)
cnpm install --save-dev stylus stylus-loader