使用 Vue-cli 构建 dm2 应用

使用 CMD 工具执行如下命令：

vue init webpack dm2

---

在 dm2 应用中添加 NewHello.vue 新组件

1. 在 src/components 文件夹下建立一个名为 NewHello.vue 的新组件，并添加如下代码：

<template>

  <div>

    <h1>{{ msg }}</h1>

  </div>

</template>

<script>

export default {

  name: 'NewHello',

  data(){

    return {

      msg: 'Hello World!'

    }

  }

}

</script>

2. 在 src/router 文件夹下打开 index.js 文件，参照 HelloWorld.vue 的引入写法，引入 NewHello.vue，添加如下代码：

import NewHello from '@/components/NewHello'

{

      path: '/HelloWorld',

      name: 'HelloWorld',

      component: NewHello

    }

2. 使用 Visual Studio Code 打开 dm2 文件夹，并在终端执行如下命令：

cnpm install

---

对比开发环境与生产环境的运行效果

开发环境

1. 在终端执行：

cnpm run dev

2. 使用浏览器打开：

http://localhost:8080/#/HelloWorld

开发环境运行结果

生产环境

1. 在终端执行：

cnpm run build

cd dist

sudo php -S 127.0.0.1:999

2. 使用浏览器打开：

http://127.0.0.1:999/#/HelloWorld

生产环境运行结果

附：解决端口被占用的方法：

sudo lsof -i tcp:999(Port)

sudo kill -9 931(PID)