vue-cli工程 需要依賴node.js 環(huán)境，在電腦上安裝node.js愈腾，安裝完成以后在命令行輸入 node -v （檢測(cè)node版本）笆怠，出現(xiàn)版本號(hào)，意味著安裝成功猪落，也就可以使用node 的包管理器 npm了贞远。
一、vue-cli項(xiàng)目使用到的技術(shù)：
1笨忌、vue.js-----------它是vue-cli工程核心蓝仲，提供數(shù)據(jù)雙向綁定和組件系統(tǒng)
2、vue-router-----用于單頁(yè)面路由跳轉(zhuǎn)官疲，屬于vue插件袱结，所以使用的時(shí)候可以Vue.use()
3、vuex------------狀態(tài)管理途凫，用于管理系統(tǒng)多個(gè)組件共享的數(shù)據(jù)
4垢夹、axios-----------用來(lái)發(fā)送請(qǐng)求，向后臺(tái)請(qǐng)求數(shù)據(jù)维费，由于不是vue插件果元，不可使用Vue.use()促王，可以在Vue原型中添加
5、webpack------管理系統(tǒng)模塊和打包系統(tǒng)
二而晒、vue-cli項(xiàng)目目錄結(jié)構(gòu)
1蝇狼、build 文件夾----存放 webpack 相關(guān)配置和腳本，開(kāi)發(fā)中僅 偶爾使用 到此文件夾下?webpack.base.conf.js?用于配置 less欣硼、sass等css預(yù)編譯庫(kù)题翰，或者配置一下 UI 庫(kù)
2、config 文件夾----主要存放配置文件诈胜，用于區(qū)分開(kāi)發(fā)環(huán)境豹障、線上環(huán)境的不同。 常用到此文件夾下?config.js?配置開(kāi)發(fā)環(huán)境的 端口號(hào)焦匈、是否開(kāi)啟熱加載 或者 設(shè)置生產(chǎn)環(huán)境的靜態(tài)資源相對(duì)路徑血公、是否開(kāi)啟gzip壓縮、npm run build 命令打包生成靜態(tài)資源的名稱和路徑等
3缓熟、dist 文件夾----默認(rèn) npm run build 命令打包生成的靜態(tài)資源文件累魔，用于生產(chǎn)部署
4、node_modules----存放npm命令下載的開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的依賴包
5够滑、src:----存放項(xiàng)目源碼及需要引用的資源文件
6垦写、src下assets-----存放項(xiàng)目中需要用到的資源文件，css彰触、js梯投、images等
7、src下componets------存放vue開(kāi)發(fā)中一些公共組件
8况毅、src下router----vue路由的配置文件
9分蓖、src下util----存放vue開(kāi)發(fā)過(guò)程中一些公共的.js方法
10、src下vuex-----存放 vuex 為vue專門(mén)開(kāi)發(fā)的狀態(tài)管理器
11尔许、src下app.vue-------使用標(biāo)簽<route-view></router-view>渲染整個(gè)工程的.vue組件
12么鹤、src下main.js------vue-cli工程的入口文件
13、index.html-----設(shè)置項(xiàng)目的一些meta頭信息和提供<div id="app"></div>用于掛載 vue 節(jié)點(diǎn)
/========================================/
├── build // 構(gòu)建相關(guān)??
├── config? ? ? ? ? ? ? ? ? ? // 配置相關(guān)
├── src? ? ? ? ? ? ? ? ? ? ? ? // 源代碼
│?? ├── api? ? ? ? ? ? ? ? ? ? // 所有請(qǐng)求
│?? ├── assets? ? ? ? ? ? ? ? // 主題 字體等靜態(tài)資源
│?? ├── components? ? ? ? ? ? // 全局公用組件
│?? ├── directive? ? ? ? ? ? ? // 全局指令
│?? ├── filtres? ? ? ? ? ? ? ? // 全局 filter
│?? ├── icons? ? ? ? ? ? ? ? ? // 項(xiàng)目所有 svg icons
│?? ├── lang? ? ? ? ? ? ? ? ? // 國(guó)際化 language
│?? ├── mock? ? ? ? ? ? ? ? ? // 項(xiàng)目mock 模擬數(shù)據(jù)
│?? ├── router? ? ? ? ? ? ? ? // 路由
│?? ├── store? ? ? ? ? ? ? ? ? // 全局 store管理
│?? ├── styles? ? ? ? ? ? ? ? // 全局樣式
│?? ├── utils? ? ? ? ? ? ? ? ? // 全局公用方法
│?? ├── vendor? ? ? ? ? ? ? ? // 公用vendor
│?? ├── views? ? ? ? ? ? ? ? ? // view
│?? ├── App.vue? ? ? ? ? ? ? ? // 入口頁(yè)面
│?? ├── main.js? ? ? ? ? ? ? ? // 入口 加載組件 初始化等
│? └── permission.js? ? ? ? ? // 權(quán)限管理
├── static? ? ? ? ? ? ? ? ? ? // 第三方不打包資源
│?? └── Tinymce? ? ? ? ? ? ? ? // 富文本
├── .babelrc? ? ? ? ? ? ? ? ? // babel-loader 配置
├── eslintrc.js? ? ? ? ? ? ? ? // eslint 配置項(xiàng)
├── .gitignore? ? ? ? ? ? ? ? // git 忽略項(xiàng)
├── favicon.ico? ? ? ? ? ? ? ? // favicon圖標(biāo)
├── index.html? ? ? ? ? ? ? ? // html模板
└── package.json? ? ? ? ? ? ? // package.json
三味廊、config文件夾 下 index.js 的對(duì)于工程 開(kāi)發(fā)環(huán)境 和 生產(chǎn)環(huán)境 的配置
build?對(duì)象下 對(duì)于 生產(chǎn)環(huán)境 的配置：
1蒸甜、index-----配置打包后入口.html文件的名稱以及文件夾名稱
2、assetsRoot-----配置打包后生成的文件名稱和路徑
3余佛、assetsPublicPath-----配置 打包后 .html 引用靜態(tài)資源的路徑迅皇，一般要設(shè)置成 "./"
4、productionGzip-------是否開(kāi)發(fā) gzip 壓縮衙熔，以提升加載速度
5登颓、assetsSubDirectory-----直接引用的靜態(tài)文件
dev?對(duì)象下 對(duì)于 開(kāi)發(fā)環(huán)境 的配置：
1、port------設(shè)置端口號(hào)（默認(rèn)端口8080红氯，由于8080被其他應(yīng)用占用框咙，本人已改成8089）
2咕痛、autoOpenBrowser-----啟動(dòng)項(xiàng)目時(shí)，自動(dòng)打開(kāi)瀏覽器
3喇嘱、proxyTable-------vue設(shè)置的代理茉贡，用以解決 跨域 問(wèn)題
四、package.json 里面的配置
1者铜、scripts-----npm run xxx 命令調(diào)用node執(zhí)行的 .js 文件（npm run dev執(zhí)行啟動(dòng)項(xiàng)目）
2腔丧、dependencies-----生產(chǎn)環(huán)境依賴包的名稱和版本號(hào)，即這些 依賴包 都會(huì)打包進(jìn) 生產(chǎn)環(huán)境的JS文件里面
3作烟、devDependencies-----開(kāi)發(fā)環(huán)境依賴包的名稱和版本號(hào)愉粤，即這些 依賴包 只用于 代碼開(kāi)發(fā) 的時(shí)候，不會(huì)打包進(jìn) 生產(chǎn)環(huán)境js文件 里面
