前言
此文章涉及到的項(xiàng)目搭建已擺脫了所有因?yàn)榇罱ōh(huán)境遇到的坑萧朝，希望對(duì)大家有用，能節(jié)省大家時(shí)間夏哭，快樂的學(xué)習(xí)
廢話不多說检柬，具體如下！Ｊ洹何址！
安裝Node環(huán)境
1、安裝node.js
下載完成后點(diǎn)擊安裝进胯，安裝過程很簡(jiǎn)單用爪，一直next即可，安裝完成會(huì)自動(dòng)添加node及npm環(huán)境變量胁镐。
檢驗(yàn)是否安裝成功项钮，在cmd輸入命令 node -v,回車 及 npm -v,回車，如出現(xiàn)下圖所示版本信息希停，表示安裝成功
2烁巫、安裝vue-cli
打開cmd命令行工具，輸入npm install -g vue-cli,回車 全局安裝vue-cli
構(gòu)建vue-cli項(xiàng)目
1宠能、創(chuàng)建項(xiàng)目
打開cmd亚隙，進(jìn)入想要?jiǎng)?chuàng)建項(xiàng)目的目錄下，輸入：vue init webpack projectname
webpack默認(rèn)是安裝2.0版本违崇，若要安裝1.0版本阿弃，需在webpack后面加上版本號(hào)信息，
vue init webpack#1.0 project-name(安裝1.0版本)
projextname是自定義的項(xiàng)目名稱
例：我這里命名為vuedemo
（PS：如果你的安裝的是vue3.0羞延，你得安裝一個(gè)橋接工具：npm install -g @vue/cli-init
這樣vue3.0和2.0的命令都可以用）
Project name:——項(xiàng)目名稱
Project description:——項(xiàng)目描述
Author:——作者
Vue build:——構(gòu)建模式渣淳，一般默認(rèn)選擇第一種
Install vue-router?:——是否安裝引入vue-router，這里選是伴箩，vue-router是路由組件,后面構(gòu)建項(xiàng)目會(huì)用到
Use ESLint to lint your code?:——這里強(qiáng)烈建議選no 否則你會(huì)非常痛苦入愧，eslint的格式驗(yàn)證非常嚴(yán)格，多一個(gè)空格少一個(gè)空格都會(huì)報(bào)錯(cuò)嗤谚，所以對(duì)于新手來說棺蛛，一般不建議開啟，會(huì)加大開發(fā)難度
Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch這兩個(gè)是測(cè)試巩步，可以不用安裝
2.安裝依賴
項(xiàng)目創(chuàng)建完成旁赊，打開文件夾可以看到目錄結(jié)構(gòu)如下
此時(shí)，項(xiàng)目已經(jīng)初具雛形椅野，但還未安裝依賴终畅，需打開cmd籍胯，進(jìn)入項(xiàng)目所在根目錄下，輸入npm install,回車
我們此時(shí)再打開項(xiàng)目文件夾离福，可以看到多了node_modules文件夾杖狼，里面是各種需要的依賴包
3.運(yùn)行項(xiàng)目
打開cmd，進(jìn)入到項(xiàng)目所在目錄下术徊，輸入npm run dev,回車，啟動(dòng)項(xiàng)目
啟動(dòng)成功后
訪問 http://localhost:8080
可以在瀏覽器看到如下畫面鲸湃，恭喜你赠涮，已成功構(gòu)建vue-cli項(xiàng)目，接下來就可以開始開發(fā)啦
4暗挑、項(xiàng)目開發(fā)完后打包
在項(xiàng)目目錄下笋除，執(zhí)行npm run build，如圖：
打包后項(xiàng)目中會(huì)多出來一個(gè)dist文件炸裆，如圖：
dist文件中打開index.html就是你的vue項(xiàng)目打包的頁(yè)面垃它。
PS：
如果打包后的Index打開后為空白頁(yè)面，你就得再配置下項(xiàng)目中的地址
1烹看、打開項(xiàng)目下build文件utils.js,修改如圖
在對(duì)應(yīng)位置添加publicPath: '../../'
2国拇、打開項(xiàng)目下build文件webpack.prod.conf.js,修改如圖
在對(duì)應(yīng)位置添加publicPath: './'
3、打開項(xiàng)目下config文件index.js,修改如圖
assetsPublicPath: ''修改為assetsPublicPath: './'
保存上述修改后惯殊，重新打包npm run build
生成的dist中的Index.html就可以打開瀏覽了
