vue-cli首次安裝使用心得

vue-cli安裝

• 全局安裝 vue-cli

$ npm install --global vue-cli

• 進入計劃存放項目的根文件，建立一個基於 webpack 模板的新項目，在這裏，咱們將這個項目的名稱命名爲vue-cli-demo

$ vue init webpack vue-cli-demo

• 安裝依賴

cd vue-cli-demo
npm install
npm run dev

Tips：對於大陸用戶，建議將 npm 的註冊表源設置爲國內的鏡像，能夠大幅提高安裝速度，爲了保證npm與cnpm版本一致，建議在安裝（install）以前執行一次如下代碼

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

Tips：因爲最新的 vue-webpack-template中已經去掉了 dev-server.js改用 webpack-dev-server代替，且默認再也不自動打開瀏覽器，須要自動打開瀏覽器的能夠在 config文件下的index.js文件中找到 dev對象中的autoOpenBrowser屬性，並將它的值由false改成true便可。

vue-cli使用

數據交互

• 安裝插件vue-resource：cnpm install vue-resource --save
• 安裝插件express：cnpm install express --save
• 修改配置文件，打開build文件夾下的webpack.dev.conf.js文件，加入如下代碼，模擬實現後臺數據加載。

const express = require('express')
const bodyParser = require('body-parser')
const fs = require('fs')
var apiServer = express()
var port = process.env.PORT || config.dev.port
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
apiRouter.route('/:apiName').all(function (req, res) {
  fs.readFile('./db.json', 'utf8', function (err, data) {
    if (err) throw err
    var data = JSON.parse(data)
    if (data[req.params.apiName]) {
      res.json(data[req.params.apiName])  
    }
    else {
      res.send('err:no such api name')
    }    
  })
})
apiServer.use('/api', apiRouter);
apiServer.listen(port + 1, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + (port + 1) + '\n')
})

• 打開config文件下的index.js文件，找到proxyTable:{}，向{}裏面加入代碼：'/api': 'http://localhost:8081'實現數據代理。
• 在項目根目錄下新建一個JSON文件：db.json，在文件中寫入所需數據便可。

Tips:在此項目中，咱們使用了默認端口port:8080加載服務，且設置數據監聽端口爲port + 1，所以，在數據代理代碼中，端口的數值爲8081

路由配置

打開同步下來的官方腳手架項目文件中Router文件夾下的index.js文件。

• 定義頁面路由：

path: '/',
   component: IndexPage,
   meta: {
     title: '首頁-售賣平臺'
   }
 },
 {
   path: '/detail',
   component: DetailPage,
   redirect: '/detail/analysis',
   children: [{
       path: 'analysis',
       component: DetailAnaPage,
       meta: {
         title: '流量分析-售賣平臺'
       }
     },
     {
       path: 'count',
       component: DetailCouPage,
       meta: {
         title: '數據統計-售賣平臺'
       }
     },
     {
       path: 'forecast',
       component: DetailForPage,
      meta: {
         title: '數據預測-售賣平臺'
       }
     },
     {
       path: 'publish',
       component: DetailPubPage,
       meta: {
         title: '廣告發布-售賣平臺'
       }
     },
   ]
 },
 {
   path: '/orderList',
   component: OrderListPage,
   meta: {
    title: '訂單列表-售賣平臺'
   }
 }
];

• 實例化路由:

const router = new VueRouter({
 mode: 'history',
 //base: 'vue-cli',
 routes
});

• 動態修改頁面標題：

router.afterEach(route => {

 // 從路由的元信息中獲取 title 屬性
 if (route.meta.title) {
   document.title = route.meta.title;

   // 若是是 iOS 設備，則使用以下 hack 的寫法實現頁面標題的更新
   if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
     const hackIframe = document.createElement('iframe');
     hackIframe.style.display = 'none';
     hackIframe.src = '/robots.txt?r=' + Math.random();
     document.body.appendChild(hackIframe);
     setTimeout(_ => {
       document.body.removeChild(hackIframe);
     }, 300);
   }
 }
})

打包發佈（Apache）

在代碼打包發佈以前，用戶能夠根據網上教程，本地自主安裝Apache服務器。服務安裝好以後，咱們須要將代碼放到咱們的服務器上，這就須要咱們將代碼打包發佈。執行 npm run build 命令，在咱們的項目目錄中會出現一個dist文件夾，這就是咱們須要放到服務器上發佈的文件。然而，每每咱們將打包好的文件放到服務器上時，網站卻不能正常打開，那是咱們的路由文件和配置文件路徑配置錯誤，須要從新編寫。

替換htdocs文件夾下的文件來發布

• 打開項目目錄中config文件夾中的index.js文件，找到build對象中的assetsPublicPath屬性,將其值設置爲'/'（vue-cli腳手架的默認值即爲'/'）
• 實例化路由時刪除其中的base屬性及其值。
• 刪除或者剪切另存Apache服務器安裝目錄下htdocs文件夾內的文件，執行npm run build命令，項目中會產生一個dist文件夾，拷貝該文件夾下的index.html和static文件夾到htdocs目錄下。
• 此時，在Apache服務器上路由跳轉是有問題的，須要在apache的配置文件httpd.conf裏面配置路由跳轉。如圖所示，在配置文件加入以下代碼：

AllowOverride all
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]

• 這時，在瀏覽器中輸入localhost：port便可訪問該網站。

拷貝 部署文件包 至htdocs文件夾發佈

• 打開項目目錄中config文件夾中的index.js文件，找到build對象中的assetsPublicPath屬性,將其值由默認值'/'改成'/store/'。再打開源碼目錄src下的路由配置文件夾router下的index.js文件，在路由配置中添加base:'store'。
• 執行npm run build命令，項目中會產生一個dist文件夾，拷貝該文件夾到htdocs目錄下。並將其名稱改成store。
• 此時，在Apache服務器上路由跳轉是有問題的，須要在apache的配置文件httpd.conf裏面配置路由跳轉。如圖所示，在配置文件加入以下代碼：

AllowOverride all
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /store/index.html [L]

• 這時，在瀏覽器中輸入localhost：port/store便可訪問該網站。
• Tips：在本例中咱們的文件夾名稱或者路徑名稱設置爲了store,在你的項目中你能夠自主命名，可是，在發佈過程當中全部用到該名稱的地方或位置，名稱必須保持一致。

自定義 部署文件包 路徑發佈

• 打開項目目錄中config文件夾中的index.js文件，找到build對象中的assetsPublicPath屬性,將其值設置爲'/'（vue-cli腳手架的默認值即爲'/'）
• 實例化路由時刪除其中的base屬性及其值。
• 執行npm run build命令，項目中會產生一個dist文件夾，拷貝或者剪切該文件夾到任意目錄（非Apache安裝目錄），並進行重命名。本例咱們將該文件夾命名爲store。
• 在apache的配置文件httpd.conf裏面打開虛擬主機Virtual hosts，即：刪除Include conf/extra/httpd-vhosts.conf這一行代碼前的#號。
• 打開Apache安裝目錄中conf文件夾下extra文件夾中的httpd-vhosts.conf文件，在其中配置以下代碼：

<VirtualHost *:80>
   ServerAdmin admin@code.com
   DocumentRoot "E:/store/"
   ServerName www.store.com
   ServerAlias www.store.com
   ErrorLog "logs/dummy-host.example.com-error.log"
   CustomLog "logs/dummy-host.example.com-access.log" common

   <Directory />
       AllowOverride all
       RewriteEngine On
       RewriteBase /
       RewriteRule ^index\.html$ - [L]
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteCond %{REQUEST_FILENAME} !-d
       RewriteRule . /index.html [L]
   </Directory>
</VirtualHost>

其中，ServerAdmin表明網站管理員，DocumentRoot表明打包好的項目文件拷貝另存的路徑，ServerName表明Url連接，ServerAlias表明連接別名。

• 打開系統Hosts文件，加入配置127.0.0.1 www.store.com。
• 這時，在瀏覽器中輸入www.store.com便可訪問該網站。

注意

在咱們修改Apache服務器的配置文件的時候，RewriteRule的值中的.與後面的路徑中間有空格。