学习vue第二天--我的第一个vue工程

学习vue第二天--我的第一个vue工程

通过菜鸟 https://www.runoob.com/vue2/vue-install.html 学习了安装 cnmp
npm install -g cnpm --registry=https://registry.npm.taobao.org
经过实际尝试，确实是淘宝的好用

添加创建工程的工具 vue-cli
cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目myvue
vue init webpack myvue

模仿HelloWorld 模块写了一个NginxTest 模块

可以通过 http://localhost:8080/#/nginx 访问
**********文件 router->index.js 如下*****************
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NginxTest from '@/components/NginxTest'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/nginx',
name: 'NginxTest',
component: NginxTest
}
]
})
**********文件 components->NginxTest.vue如下*****************
<template>
<div class="nginx">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="http://localhost:8090/vue/firstvue.html"
target="_blank"
>
nginx-vue
</a>
</li>
</ul>
</div>
</template>

<script>
export default {
name: 'NginxTest',
data () {
return {
msg: 'Welcome to my nginx vue！'
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

---------------------------------------
文件目录如下：

d:\vue\myvue\src>tree /f
卷 新加卷 的文件夹 PATH 列表
卷序列号为 BA81-13D2
D:.
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
├─components
│ HelloWorld.vue
│ NginxTest.vue
│
└─router
index.js