本文主要介紹如何搭建 Vue 的開發(fā)環(huán)境，最優(yōu)化的工具實(shí)踐等。
1. 基礎(chǔ)SDK
- 開發(fā)語言： 與常規(guī)的前端開發(fā)語言一樣： html/CSS/JS等
- 環(huán)境依賴： NodeJS npm cnpm等
- 開發(fā)工具： VSCode
2. 搭建開發(fā)環(huán)境
2.1 Node.js的安裝
略過Node.js的安裝過程
2.2 安裝VSCode
略過安裝過程
2.3 安裝cnpm
第一步：使用VSCode打開文件夾，使用快捷鍵Ctrl+ `來打開編輯器自帶的終端。
第二步：輸入命令，安裝cnpm的淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
第三步：之后就可以在環(huán)境中直接使用cnpm代替npm命令
2.4 安裝vue
輸入命令安裝穩(wěn)定版本的vue
cnpm install vue
2.5 安裝vue-cli
vue-cli是vue開發(fā)的腳手架，幫助開發(fā)者快速搭建一個(gè)模板化的vue工程。其結(jié)構(gòu)所代表的意義網(wǎng)上介紹較多，不再贅述。
安裝腳手架的意義
- 腳手架通過webpack搭建開發(fā)環(huán)境
- 使用ES6語法
- 打包和壓縮JS為一個(gè)文件
- 項(xiàng)目文件在環(huán)境中編譯，而不是瀏覽器
- 頁面自動(dòng)刷新
安裝過程直接執(zhí)行命令
cnpm install --global vue-cli
vue-cli的安裝
3. 初始化一個(gè)Vue項(xiàng)目
使用腳手架可以方便的創(chuàng)建vue工程。從起步開始，可以快捷的進(jìn)行vue工程的創(chuàng)建。
第一步： 執(zhí)行命令，創(chuàng)建一個(gè)vue模板工程。
vue init webpack my-project
創(chuàng)建之前會(huì)不斷在終端發(fā)出配置的詢問，按照提示輸入自己的配置即可簡單定制。
Vue項(xiàng)目的配置過程
第二步： 執(zhí)行命令，啟動(dòng)項(xiàng)目
cd my-project
npm run dev
此時(shí)訪問瀏覽器的http://localhost:8080即可預(yù)覽模板工程視圖。
說明
- vue-cli幫我們建立的模板工程文件結(jié)構(gòu)明晰，主要操作的部分是src下面的組件部分。
- 自帶了一個(gè)helloworld的實(shí)例組件
4. Vue文件該怎么看？
使用VSCode打開hello.vue文件的時(shí)候，會(huì)提示讓你安裝Vetur插件，安裝插件后，能夠很好地適配Vue的開發(fā)。
每個(gè)Vue文件可以分為三個(gè)功能部分。主要是：
- 模板：html部分
- 行為：邏輯的處理(script代碼)
- 樣式：CSS部分
項(xiàng)目中文件的生效順序
index.html → main.js → App.vue
