vue-cli工程 需要依賴node.js 環(huán)境，在電腦上安裝node.js，安裝完成以后在命令行輸入 node -v （檢測node版本），出現(xiàn)版本號，意味著安裝成功，也就可以使用node 的包管理器 npm了。
一、vue-cli項目使用到的技術：
1、vue.js-----------它是vue-cli工程核心，提供數(shù)據(jù)雙向綁定和組件系統(tǒng)
2、vue-router-----用于單頁面路由跳轉，屬于vue插件，所以使用的時候可以Vue.use()
3、vuex------------狀態(tài)管理，用于管理系統(tǒng)多個組件共享的數(shù)據(jù)
4、axios-----------用來發(fā)送請求，向后臺請求數(shù)據(jù)，由于不是vue插件，不可使用Vue.use()，可以在Vue原型中添加
5、webpack------管理系統(tǒng)模塊和打包系統(tǒng)
二、vue-cli項目目錄結構
1、build 文件夾----存放 webpack 相關配置和腳本，開發(fā)中僅 偶爾使用 到此文件夾下?webpack.base.conf.js?用于配置 less、sass等css預編譯庫，或者配置一下 UI 庫
2、config 文件夾----主要存放配置文件，用于區(qū)分開發(fā)環(huán)境、線上環(huán)境的不同。 常用到此文件夾下?config.js?配置開發(fā)環(huán)境的 端口號、是否開啟熱加載 或者 設置生產環(huán)境的靜態(tài)資源相對路徑、是否開啟gzip壓縮、npm run build 命令打包生成靜態(tài)資源的名稱和路徑等
3、dist 文件夾----默認 npm run build 命令打包生成的靜態(tài)資源文件，用于生產部署
4、node_modules----存放npm命令下載的開發(fā)環(huán)境和生產環(huán)境的依賴包
5、src:----存放項目源碼及需要引用的資源文件
6、src下assets-----存放項目中需要用到的資源文件，css、js、images等
7、src下componets------存放vue開發(fā)中一些公共組件
8、src下router----vue路由的配置文件
9、src下util----存放vue開發(fā)過程中一些公共的.js方法
10、src下vuex-----存放 vuex 為vue專門開發(fā)的狀態(tài)管理器
11、src下app.vue-------使用標簽<route-view></router-view>渲染整個工程的.vue組件
12、src下main.js------vue-cli工程的入口文件
13、index.html-----設置項目的一些meta頭信息和提供<div id="app"></div>用于掛載 vue 節(jié)點
/========================================/
├── build // 構建相關??
├── config? ? ? ? ? ? ? ? ? ? // 配置相關
├── src? ? ? ? ? ? ? ? ? ? ? ? // 源代碼
│?? ├── api? ? ? ? ? ? ? ? ? ? // 所有請求
│?? ├── assets? ? ? ? ? ? ? ? // 主題 字體等靜態(tài)資源
│?? ├── components? ? ? ? ? ? // 全局公用組件
│?? ├── directive? ? ? ? ? ? ? // 全局指令
│?? ├── filtres? ? ? ? ? ? ? ? // 全局 filter
│?? ├── icons? ? ? ? ? ? ? ? ? // 項目所有 svg icons
│?? ├── lang? ? ? ? ? ? ? ? ? // 國際化 language
│?? ├── mock? ? ? ? ? ? ? ? ? // 項目mock 模擬數(shù)據(jù)
│?? ├── router? ? ? ? ? ? ? ? // 路由
│?? ├── store? ? ? ? ? ? ? ? ? // 全局 store管理
│?? ├── styles? ? ? ? ? ? ? ? // 全局樣式
│?? ├── utils? ? ? ? ? ? ? ? ? // 全局公用方法
│?? ├── vendor? ? ? ? ? ? ? ? // 公用vendor
│?? ├── views? ? ? ? ? ? ? ? ? // view
│?? ├── App.vue? ? ? ? ? ? ? ? // 入口頁面
│?? ├── main.js? ? ? ? ? ? ? ? // 入口 加載組件 初始化等
│? └── permission.js? ? ? ? ? // 權限管理
├── static? ? ? ? ? ? ? ? ? ? // 第三方不打包資源
│?? └── Tinymce? ? ? ? ? ? ? ? // 富文本
├── .babelrc? ? ? ? ? ? ? ? ? // babel-loader 配置
├── eslintrc.js? ? ? ? ? ? ? ? // eslint 配置項
├── .gitignore? ? ? ? ? ? ? ? // git 忽略項
├── favicon.ico? ? ? ? ? ? ? ? // favicon圖標
├── index.html? ? ? ? ? ? ? ? // html模板
└── package.json? ? ? ? ? ? ? // package.json
三、config文件夾 下 index.js 的對于工程 開發(fā)環(huán)境 和 生產環(huán)境 的配置
build?對象下 對于 生產環(huán)境 的配置：
1、index-----配置打包后入口.html文件的名稱以及文件夾名稱
2、assetsRoot-----配置打包后生成的文件名稱和路徑
3、assetsPublicPath-----配置 打包后 .html 引用靜態(tài)資源的路徑，一般要設置成 "./"
4、productionGzip-------是否開發(fā) gzip 壓縮，以提升加載速度
5、assetsSubDirectory-----直接引用的靜態(tài)文件
dev?對象下 對于 開發(fā)環(huán)境 的配置：
1、port------設置端口號（默認端口8080，由于8080被其他應用占用，本人已改成8089）
2、autoOpenBrowser-----啟動項目時，自動打開瀏覽器
3、proxyTable-------vue設置的代理，用以解決 跨域 問題
四、package.json 里面的配置
1、scripts-----npm run xxx 命令調用node執(zhí)行的 .js 文件（npm run dev執(zhí)行啟動項目）
2、dependencies-----生產環(huán)境依賴包的名稱和版本號，即這些 依賴包 都會打包進 生產環(huán)境的JS文件里面
3、devDependencies-----開發(fā)環(huán)境依賴包的名稱和版本號，即這些 依賴包 只用于 代碼開發(fā) 的時候，不會打包進 生產環(huán)境js文件 里面
