1、安装vue-cli脚手架后，即可开始创建第一个vue项目，首先新建一个空文件夹，打开该文件夹，按住shift键的同时点击鼠标右键，出现如下图所示的菜单，选择“在此处打开命令窗口”打开命令行。
2、在命令行里输入vue init webpack project1，即可创建一个新的vue项目，其中需要做一些选择，如下图所示。
3、创建好project1项目后，打开该文件夹，里面有一个index.html文件，当布署到服务器之后，这个页面就是首页面。用写字本打开index.html文件，其内容极简单，<body></body>内部只有一行有效代码：<div id="app"></div>。后面有一行注释说明文件将自动注入，也就是项目运行时，页面内容都在这个<div>标签里显示。
4、找到src文件夹下的App.vue文件，打开。这个vue页面相当于一个根页面，其中的<template>标签里的所有内容就是要在index.html里显示的内容，默认文件是这样的：
1 <template> 2 <div id="app"> 3 <img src="./assets/logo.png"> 4 <router-view/> 5 </div> 6 </template>
这里面也有一对<div id="app"></div>标签，但这个app和index.html里的app没有任何关系。第3行是说明在页面里引入图片（就是V字logo图片），下面的<router-view/>是指显示根据路由文件index.js指定的vue页面，打开路由文件index.js，注意到如下的代码：这里定义了路由，path:‘/‘是指网页根目录，component:HelloWorld是指HelloWorld这个vue组件。
1 routes: [ 2 { 3 path: ‘/‘, 4 name: ‘HelloWorld‘, 5 component: HelloWorld 6 } 7 }
那么，App.vue和index.html又是如何联系起来的呢？打开main.js这个文件，有如下代码：
new Vue({ el: ‘#app‘, router, components: { App }, template: ‘<App/>‘ })
el是指挂载对象，这个#app就是index.html里的<div id="app"></div>，router是指router文件夹，components就是指App.vue，template是指用<app></app>代替index.html中的div id="app"></div>。
5、理解了vue的基本结构后，开始制作第一个vue项目，这个项目由两个自已编制的vue组件组成，在components文件夹里新建一个views文件夹，新建两个vue组件F.vue和F2.vue，这里只编写<template>和<javascript>两个标签里的代码。主要是显示一个表格，代码如下：
F.vue的代码：
<template> <div id="test"> <table border="1px" width="600px"> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> </tr> </table> </div> </template> <script> export default{ name:"first", data(){ return{ people:[{name:‘n‘,age:‘2‘,sex:‘m‘},{name:‘运‘,age:‘14‘,sex:‘f‘}] }; } }; </script> <style> </style>
F2.vue的代码：
<template> <div id="test"> <table border="1px" width="600px"> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> </tr> </table> </div> </template> <script> export default{ name:"second", data(){ return{ people:[{name:‘张三‘,age:‘2‘,sex:‘男‘},{name:‘李四‘,age:‘14‘,sex:‘女‘}] }; } }; </script> <style> </style>
6、在router文件夹中的index.js里注册这两个vue组件的路由，修改index.js代码如下：
1 import Vue from ‘vue‘ 2 import Router from ‘vue-router‘ 3 import HelloWorld from ‘@/components/HelloWorld‘ 4 import F from ‘@/components/views/F‘ 5 import F2 from ‘@/components/views/F2‘ 6 7 Vue.use(Router) 8 9 export default new Router({ 10 mode:‘history‘,//修改模式，不用加#来访问页面 11 routes: [ 12 { 13 path: ‘/‘, 14 name: ‘HelloWorld‘, 15 component: HelloWorld 16 }, 17 { 18 path:‘/f‘, 19 name:‘F‘, 20 component:F 21 }, 22 { 23 path:‘/F2‘, 24 name:‘F2‘, 25 component:F2 26 } 27 ] 28 })
7、修改App.vue文件，添加链接，代码改成如下：
<template> <div id="app"> <router-link to="/F2":exact="true">转到F2页面</router-link>    <router-link to="/f":exact="true">转到F面</router-link> <router-view/> </div> </template> <script> export default { name: ‘App‘ } </script>
8、调试页面，在命令行里输入npm run dev，根据提示用http://localhost:8080访问生成的页面。
9、打包布署，先修改config文件夹下的index.js文件夹里的两个参数，assetsPublicPath增加一个点，productionSourceMap改成false，如下图所示：
10、在命令行输入npm run build即可生成一个dist文件夹，将该文件夹复制到tomcat服务器的webapps文件夹里，启动tomcat，即可在http://ip地址:端口/dist看到最终的web应用。
原文：https://www.cnblogs.com/wwwzgy/p/14359178.html