1、準(zhǔn)備工作

目前使用前端工程化開發(fā)項目已成為行業(yè)發(fā)展的主流趨勢，也就是說，我么需要借助一些工具來搭建vue的開發(fā)環(huán)境，一般情況下使用webpack來搭建，在這里我們使用vue官方提供的，基于webpack的腳手架工具:vue-cli
1.1 安裝node
vue框架是一個基于Node.js的開發(fā)框架，要求node版本必須在8.0及8.0+以上版本，另外Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。
node下載地址：http://nodejs.cn/download/

node.js下載安裝

1.2 安裝npm
npm是nodejs的包管理器，用于管理插件（安裝，卸載，管理依賴等）
如果時最新版的node.js，安裝以后不需要再單獨安裝npm
再node.js的命令面板中查看node.js以及npm的版本。
執(zhí)行命令：

    node --version
    npm -- version

使用npm安裝插件：命令提示符：

npm install <插件名> [-g] [--save-dev]
--> -g :全局安裝，會寫入系統(tǒng)環(huán)境變量，可以通過命令行在任何地方調(diào)用它；
--> --save：非全局安裝，安裝到當(dāng)前定位目錄下的node_modules文件下，配置信息寫入到package.json文件中dependencies對象中（生產(chǎn)環(huán)境）；
--> --save-dev：非全局安裝，安裝到當(dāng)前定位目錄下的node_modules文件下，配置信息寫入到package.json文件中devDependencies對象中（開發(fā)環(huán)境）；
其中，install 可以縮寫為 i ; --save 縮寫為-S；--save-dev 可以縮寫為 -D

1.3 配置淘寶鏡像
由于npm安裝插件時是從從http://registry.npmjs.org下載對應(yīng)的插件包（該網(wǎng)站服務(wù)器位于國外，所以經(jīng)常下載緩慢或出現(xiàn)異常），為避免這一問題，國內(nèi)用戶建議將npm的注冊表源設(shè)置為國內(nèi)的鏡像，可以大幅度提升安裝速度；國內(nèi)鏡像推薦使用淘寶npm鏡像
搜索地址：http://npm.taobao.org/
registry地址：http://registry.npm.taobao.org/
安裝命令提示符：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝后如果顯示cnpm版本號，則表示安裝成功。安裝成功后則可以使用cnpm來管理nodejs插件
如： cnpm install ###

安裝cnpm成功

2、安裝vue腳手架構(gòu)建工具

全局安裝 vue-cli3.0

cnpm install -g @vue/cli

安裝后，輸入 vue- V 查看vue版本號：若是出現(xiàn)，則說明安裝成功。

腳手架構(gòu)建工具vue-cli安裝成功

3、創(chuàng)建vue項目

（1）創(chuàng)建一個vue項目：進(jìn)入項目文件所在目錄：

（2）執(zhí)行命令：創(chuàng)建新項目test-project

vue create test-project

image.png

（3）選擇配置方式
按鍵盤上下鍵選擇默認(rèn)（default）或者是手動（Manually），若是選擇defaule，則一路回車執(zhí)行即可。這里我選擇的是manually。
（4）選擇配置項，看個人項目需求，注意：空格鍵是選中與取消，A鍵是全選；其中：

• TypeScript 支持使用 TypeScript 書寫源碼
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 預(yù)處理器。
• Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
• Unit Testing 支持單元測試。
• E2E Testing 支持 E2E 測試。

這里我選擇的是Babel、Router、Vuex、CSS Pre-processors 。
（5）選擇路由模式
路由模式選擇是否為histor，選擇y；

router模式

（6）選擇CSS預(yù)編譯類型
選擇CSS樣式預(yù)編譯器，我選擇sass/scss（with node-sass）

CSS預(yù)編譯器選擇

（7）選擇配置文件存放的地方
第一個是獨立的文件夾位置，第二個是package.json文件中，選擇第一個。

選擇配置文件存放位置

（8）是否記錄配置內(nèi)容
詢問是否記錄這一次的配置，以便下一次使用，選擇N，不記錄。

image.png

回車執(zhí)行創(chuàng)建項目：若有如下提示，則表示創(chuàng)建項目成功：

創(chuàng)建項目成功

按照提示進(jìn)入項目文件，并運行(npm run serve),在瀏覽器中輸入下圖所示鏈接則啟動項目

項目啟動成功

4、項目文件結(jié)構(gòu)解析

4.1 初始結(jié)構(gòu)
vue-cli3.0創(chuàng)建的項目初始時實際結(jié)構(gòu)如下所示：

項目初始結(jié)構(gòu)

每個人創(chuàng)建項目時配置的內(nèi)容不同，結(jié)構(gòu)文件可能略有不同，但node_modules、public、src、view、main.js、router.js、store.js、package.json等主體文件不會變。
4.2 優(yōu)化結(jié)構(gòu)
（1）在根目錄下創(chuàng)建vue.config.js
vue-cli升級到3后，減少了很多的配置文件，將所有的配置項都濃縮到了vue.config.js中，若是項目的根目錄中存在這個文件（與package.json同級），那么它就會被@vue/cli-service自動加載，vue.config.js中導(dǎo)出的是一個包含了選項的對象：

//vue.config.js
module.exports = {
  baseUrl: '/',// 部署應(yīng)用時的根路徑(默認(rèn)'/'),也可用相對路徑(存在使用限制)，注意：從 Vue CLI 3.3 起已棄用，請使用 ***publicPath***
  outputDir: 'dist',// 運行時生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄(默認(rèn)''dist''，構(gòu)建之前會被清除)
  assetsDir: '',//放置生成的靜態(tài)資源(s、css、img、fonts)的(相對于 outputDir 的)目錄(默認(rèn)'')
  indexPath: 'index.html',//指定生成的 index.html 的輸出路徑(相對于 outputDir)也可以是一個絕對路徑。
  pages: {//pages 里配置的路徑和文件名在你的文檔目錄必須存在 否則啟動服務(wù)會報錯
    index: {//除了 entry 之外都是可選的
      entry: 'src/index/main.js',// page 的入口,每個“page”應(yīng)該有一個對應(yīng)的 JavaScript 入口文件
      template: 'public/index.html',// 模板來源
      filename: 'index.html',// 在 dist/index.html 的輸出
      title: 'Index Page',// 當(dāng)使用 title 選項時,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在這個頁面中包含的塊，默認(rèn)情況下會包含,提取出來的通用 chunk 和 vendor chunk
    },
    subpage: 'src/subpage/main.js'//官方解釋：當(dāng)使用只有入口的字符串格式時,模板會被推導(dǎo)為'public/subpage.html',若找不到就回退到'public/index.html',輸出文件名會被推導(dǎo)為'subpage.html'
  },
  lintOnSave: true,// 是否在保存的時候檢查
  productionSourceMap: true,// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
  css: {
    extract: true,// 是否使用css分離插件 ExtractTextPlugin
    sourceMap: false,// 開啟 CSS source maps
    loaderOptions: {},// css預(yù)設(shè)器配置項
    modules: false// 啟用 CSS modules for all css / pre-processor files.
  },
  devServer: {// 環(huán)境配置
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, //配置自動啟動瀏覽器
    proxy: {// 配置多個代理(配置一個 proxy: 'http://localhost:4000' )
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  },
  pluginOptions: {// 第三方插件配置
    // ...
  }
};

vue.config.js的具體配置可參考：https://cli.vuejs.org/zh/config/#vue-config-js

（2）單獨管理vuex
初始時，在src文件夾下自動生成store.js的文件，主要配置vuex的相關(guān)內(nèi)容：

store.js.png

為方便管理，在src中單獨創(chuàng)建store文件夾，集中管理store相關(guān)模塊，將store.js放入store文件夾中更名為index.js，作為store的入口文件。然后設(shè)置全局vuex配置和模塊化的vuex配置；
（3）單獨管理router
初始時，在src文件夾下自動生成router.js的文件，主要配置router的相關(guān)內(nèi)容：

image.png

為方便管理，在src中單獨創(chuàng)建router文件夾，集中管理router相關(guān)模塊，在router文件夾中創(chuàng)建index.js，將其作為router的入口文件，創(chuàng)建router.js，用來配置本項目路由信息；
（4）創(chuàng)建api文件夾
在src文件夾下創(chuàng)建api文件夾，主要用來管理與后端交互使用的相關(guān)方法和配置。
4.3 優(yōu)化后的項目結(jié)構(gòu)及主要作用
基于vue-cli3.0腳手架搭建的項目結(jié)構(gòu)以及每個文件的主要作用如下圖所示：

項目詳細(xì)介紹