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 [e-mail]
   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的值中的.与后面的路径中间有空格。