使用 Vue-cli 构建 dm2 应用
使用 CMD 工具执行如下命令：
vue init webpack dm2
在 dm2 应用中添加 NewHello.vue 新组件
- 在
src/components文件夹下建立一个名为NewHello.vue的新组件，并添加如下代码：
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'NewHello',
data(){
return {
msg: 'Hello World!'
}
}
}
</script>
- 在
src/router文件夹下打开index.js文件，参照HelloWorld.vue的引入写法，引入NewHello.vue，得到如下代码：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NewHello from '@/components/NewHello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/HelloWorld',
name: 'HelloWorld',
component: NewHello
}
]
})
- 使用
Visual Studio Code打开dm2文件夹，并在终端执行如下命令：
cnpm install
对比开发环境与生产环境的运行效果
开发环境
- 在终端执行：
cnpm run dev
- 使用浏览器打开如下地址：
http://localhost:8080/
开发环境运行结果
生产环境
- 在终端执行：
cnpm run build
cd dist
sudo php -S 127.0.0.1:999
- 使用浏览器打开如下地址：
http://127.0.0.1:999/#/HelloWorld
生产环境运行结果
附：解决端口被占用的方法：
sudo lsof -i tcp:999(Port)
sudo kill -9 931(PID)
