前端開發(fā)環(huán)境前期準(zhǔn)備工作赦抖，該過程只需操作一次(除非更新版本)

1查辩，安裝node環(huán)境

????????下載并安裝node環(huán)境：下載安裝包?https://nodejs.org/en/download

? ? ? ? cmd命令窗口輸入node -v或npm -v轨奄，如果出現(xiàn)版本號說明安裝成功

安裝node會默認(rèn)配置環(huán)境變量赚哗，所以任意位置均可執(zhí)行相關(guān)命令

? ? ? ? 為了提高安裝速度嗦锐，可以使用淘寶鏡像?https://npm.taobao.org

? ? ? ? cmd命令窗口輸入npm install -g cnpm --registry=https://registry.npm.taobao.org

? ? ? ? cmd命令窗口輸入cnpm -v顶猜，檢查是否安裝成功

后面可用cnpm代替npm

2，安裝vue項(xiàng)目環(huán)境

? ? ? ? 全局安裝vue-cli：cmd窗口輸入npm install -g vue-cli

????????進(jìn)入項(xiàng)目目錄粤剧，創(chuàng)建一個新項(xiàng)目：cmd命令窗口輸入vue init webpack 項(xiàng)目名

Vue build: 打包方式????Install vue-router:?是否要安裝vue-router????Use ESLint to lint your code: 是否需要js語法檢測????Set up unit tests:?是否安裝單元測試工具????Setup e2e tests with Nightwatch:?是否需要端到端測試工具

????????進(jìn)入項(xiàng)目：cmd窗口輸入cd anhave歇竟，安裝依賴：cmd窗口輸入npm install

????????啟動項(xiàng)目：cmd窗口輸入npm start

項(xiàng)目目錄結(jié)構(gòu)
????????build? ? // webpack相關(guān)配置

? ? ? ? ? ? ? ? -- build.js? ? // 生產(chǎn)環(huán)境構(gòu)建腳本

? ? ? ? ? ? ? ? -- check-versions.js????//?檢查npm，node.js版本

? ? ? ? ? ? ? ? -- utils.js? ? // 構(gòu)建相關(guān)工具方法

? ? ? ? ? ? ? ? -- vue-loader.conf.js? ? // 配置了css加載器以及編譯css之后自動添加前綴

? ? ? ? ? ? ? ? -- webpack.base.conf.js? ? // webpack基本配置

? ? ? ? ? ? ? ? -- webpack.dev.conf.js? ? // webpack開發(fā)環(huán)境配置

? ? ? ? ? ? ? ? -- webpack.prod.conf.js? ? // webpack生產(chǎn)環(huán)境配置

????????config? ? // 項(xiàng)目配置

? ? ? ? ? ? ? ? -- dev.env.js? ? // 開發(fā)環(huán)境變量

? ? ? ? ? ? ? ? -- index.js? ? // 項(xiàng)目配置文件

? ? ? ? ? ? ? ? -- prod.env.js? ? // 生產(chǎn)環(huán)境變量

????????node_modules? ? // npm加載的項(xiàng)目依賴模塊

????????src? ? // 這里是我們要開發(fā)的目錄抵恋，基本上要做的事情都在這個目錄里

? ? ? ? ? ? ? ? -- assets? ? // 資源目錄焕议，放置一些圖片或者公共js、css弧关，這里的資源會被webpack構(gòu)建

? ? ? ? ? ? ? ? -- components? ? // 組件目錄盅安，我們寫的組件就放在這個目錄里面

? ? ? ? ? ? ? ? -- router? ? // 前端路由，我們需要配置的路由路徑寫在index.js里面

? ? ? ? ? ? ? ? -- App.vue? ? // 根組件

? ? ? ? ? ? ? ? -- main.js? ? // 入口js文件

????????static? ? // 靜態(tài)資源目錄世囊，如圖片别瞭、字體等，不會被webpack構(gòu)建

????????.babelrc????// babel參數(shù)

????????.editorconfig????// 代碼格式

????????.gitignore????// git上傳相關(guān)配置

????????.postcssrc.js????// css相關(guān)工具

????????index.html? ? // 首頁入口文件株憾，可以添加一些 meta 信息等

????????package.json? ? // npm包配置文件蝙寨，定義了項(xiàng)目的npm腳本，依賴包等信息

????????README.md? ? // 項(xiàng)目的說明文檔嗤瞎，markdown 格式