简单实现
首先是简单html的实现的登录页面：
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
</head>
<body>
<form action="/register" method="post">
<fieldset>
<legend>注册</legend>
<label>用户名：</label>
<input type="text" name="user" required>
<br>
<label>密码：</label>
<input type="text" name="pwd" required>
<br>
<label>再次输入密码：</label>
<input type="text" name="pwd1" required>
<br>
<input type="submit" value="注册">
</fieldset>
</form>
</body>
</html>不加样式的注册页面就这样，对应的登录页面也就删去重复输入密码环节而已：
发现用table可以让页面美化一点，所以：
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
</head>
<body>
<div align="center">
<table>
<tr><td height="80">注册</td></tr>
</table>
<form action="/register" method="post">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="user" required></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" name="pwd" required></td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input type="text" name="pwd1" required></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="1"/>
<label for="gender1">男</label>
<input type="radio" name="gender" value="0">
<label for="gender2">女</label>
</td>
</tr>
<tr>
<td>民族:</td>
<td>
<select name="nation">
<option value="1" selected>汉族</option>
<option value="2">壮族</option>
<option value="3">苗族</option>
<option value="4">回族</option>
<option value="5">傣族</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="checkbox" name="confirm">
<label>我同意<a href="/protocol">协议</a></label>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</div>
</body>
</html>如上，使用三个table，第一个是用来提示的，最后一个是用来包囊submit的，分开主要是为了让它可以居中，如果在一个table里面，只会在一个格子里居中而不是整个页面效果，所以拆开了。另外给添加了性别的选择框和汉族的下拉列表。
另外的想要注册按钮在两个格子中间，可以使用colspan属性。
使用vue进行实现
要使用vue，首先要安装nodejs，因为vue本身算是nodejs的一个框架，官网下载地址：
https://nodejs.org/zh-cn/download因为有微信发文的需求，就不使用md语法来内嵌链接了，直接发这好复制吧。下载好node以后，就可以使用npm这个包管理器了，也可以另外下载cnpm，各种加速配置之类的也不再赘述了，信息太多。下面下载vue和vue脚手架：
# 安装vue
npm i vue -g
# 安装vue脚手架
npm i vue-cli -g简单介绍一下，npm下载有两种区别，-g参数表示全局下载，不带这个参数就是局部下载，前者下载安装的库和可执行文件整个系统可用(只要配好了环境变量)，后者只针对当前项目，下载的东西都丢到当前项目路径的node_modules中，同时生成和项目息息相关的package.json和package-lock.json两个文件，基本都是包信息。
然后进行项目初始化：
vue init webpack vue-login上面的主命令是vue init，进行初始化用上了webpack包，并且命名项目名为vue-login，然后后面会有一系列命令行问答，根据你回答的信息进行自定义设置项目信息，比如项目名、某某技术要不要用什么的。如下：
? Project name vue-login
? Project description A Vue.js project
? Author JackSama <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm大致上就这样的一些问答，简单enter就够了，除非你有特别需求，项目初始化完成以后，它有着提示信息，说开始运行一个项目就切换进去，然后npm run dev，都有提示的(以后想自己开发一个，这些信息提示的完成就已经够烦人了)。一个简单项目结构如下：
现在还么做任何改动的情况下，跑起来的vue项目时这样的：
简单来看一下流程，其实针对一个简单的项目开发，主要关注src目录就够了的，总控就是src下main.js和App.vue两个文件，前者是程序入口文件，主要是实例化对象，这里就是实例化一个Vue对象，并且引入router、组件compents和一些公共组件，后者是项目的main组件，是页面的入口文件，也可以说是home页面； 然后是asset文件夹，存放了一张logo，也可以拿来存放静态资源；
然后是components文件夹，用来存放开发的组件的，比如这里就有个HelloWorld.vue，你看了就会发现，它的语法其实是html语法，也就说vue文件其实可以写页面html，不过它又引入了模板语法，可以进行其他部分的扩充，不用完整编辑一个html文件，学习过flask的模板的或者django这些个web框架模板语法的应该很容易上手，都是Jinja2那一类的模板语法应用。
最后是重要的router目录，顾名思义，路由部分嘛，注册路由的，具体注册倒是很像django框架的urls.py，真的是一法通万法通啊，积累的作用看出来了。对于新手来说，应当关注router中index.js的routes信息，里面只设置了一个路由。
要注意的是，关于项目的一些信息设置，就关注根目录下config目录中信息，一般看index.js就够了，里面可以设置host、port以及一些特定文件夹信息。比如要设置热更方便debug，就给dev信息中添加hot为true就行，要设置局域网可访问而不是局限于本机那就设置host为0.0.0.0，这些都可以在index.js进行设置。
进行开发
因为只要一个简单的登录页面，没有后续其他页面互动了，所以直接修改components下HelloWorld.vue，因为不关注样式，所以不修改style，只关注template中内容：
<template>
<div align="center" class="hello">
<table>
<tr><td height="80">注册</td></tr>
</table>
<form action="/register" method="post">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="user" required></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" name="pwd" required></td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input type="text" name="pwd1" required></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="1"/>
<label for="gender1">男</label>
<input type="radio" name="gender" value="0">
<label for="gender2">女</label>
</td>
</tr>
<tr>
<td>民族:</td>
<td>
<select name="nation">
<option value="1" selected>汉族</option>
<option value="2">壮族</option>
<option value="3">苗族</option>
<option value="4">回族</option>
<option value="5">傣族</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="checkbox" name="confirm">
<label>我同意<a href="/protocol">协议</a></label>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</div>
</template>如上，直接把上面的html中的主体body部分给template进行替换了就行，因为要应用它框架早期设计的样式，所以给整个div给用上之前的class，因为它的样式是绑定class的。而且设置了热更，直接保存更改就能在页面看到效果了。效果如下：
这样就不用针对路由进行其他设置了，如果不需要上面的logo，可以修改src根目录下App.vue的template部分，因为上面的内容是渲染到这里的，丢弃这里的img就好。抛开vue框架，把vue作为库进行引入，其实上面的实现就是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-login</title>
<script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<img src="./assets/logo.png">
<div align="center" class="hello">
<table>
<tr><td height="80">注册</td></tr>
</table>
<form action="/register" method="post">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="user" required></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" name="pwd" required></td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input type="text" name="pwd1" required></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="1"/>
<label for="gender1">男</label>
<input type="radio" name="gender" value="0">
<label for="gender2">女</label>
</td>
</tr>
<tr>
<td>民族:</td>
<td>
<select name="nation">
<option value="1" selected>汉族</option>
<option value="2">壮族</option>
<option value="3">苗族</option>
<option value="4">回族</option>
<option value="5">傣族</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="checkbox" name="confirm">
<label>我同意<a href="/protocol">协议</a></label>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<script>
export default {
name: 'App'
}
</script>
</body>
</html>上面只是大致上做了一个拼接，让它更加贴合html一点，并不是严格的执行标准，要跑起来还得处理图片路径等问题。
一些简单的vue语法
针对vue的一些学习，可以查看vue中文文档，不过它是那种，嗯，让你不知道怎么下手的或者说你有过一定其他功底的才能明白它的一些自然而然的行为的，总之对初学者不友好吧。在vue中，绑定一些数据，使用的是{{...}}的样式，这也是在flask和django中通用的模板语法，或者说是我所知道的叫Jinja2的语法。如下：
<div id="app">
<p>{{ msg }}</p>
</div>针对msg的具体信息，可以使用script来进行一些个定义：
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>如上进行调用，在HelloWorld被调用以后，msg就给赋以了'Welcome to Your Vue.js App'的信息，然后可以渲染到上面的msg里面。下面这个例子的使用是挺有意思的：
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>通过script来进行一些变量的定义，然后在div中进行应用。script中是针对js的语法，所以各种框架，基础都是js，这是基石，而学习vue，除了js以外，还需要学习如何使用html的模板语法来进行DOM和底层vue实例的绑定。
用其他版本进行实现
嗯，要知道的是，上面的vue的实现用的是版本2.9，用的是vue-cli对应2.x版本的脚手架，对应3.x版本的脚手架，用的是@vue/cli。vue2创建项目，用的是vue init webpack，vue3用的是vue create，后者的应用，想要有个模板来进行项目初始化，需要安装全局桥接工具@vue/cli-init，然后运行命令是npm run serve。下面在ubuntu中进行一下尝试：
sudo apt update
sudo apt install node npm
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org如上在ubuntu中进行node和npm以及cnpm的安装，前者是编译运行主体，后两者是包管理器，然后来下载vue3版本的脚手架来进行：
sudo npm install -g @vue/cli
# 检查全局安装列表
sudo npm list -g --depth 0
/usr/local/lib
├── @vue/[email protected]
├── [email protected]
└── [email protected]开启一个项目：
# 检验vue版本
vue -V
vue create hello-world开启项目的一系列设置用的是vue3和一些默认设置，在项目完成创建以后，输出提示如下：
Successfully created project hello-world.
Get started with the following commands:
$ cd hello-world
$ npm run serve如上，接下来运行起来的命令就是npm run serve了，运行起来后发现，该服务可以通过局域网进行访问，效果如下：
简单的针对单页面的设计，和上面一样，针对src中components的HelloWorld.vue进行设计，只改动template即可。修改效果如下：
ok，可以进行了，把前面的登录页面的简单实现给copy到HelloWorld.vue中template，代码已经在上面，就不再过多修改。
{{item.user_info.nickname ? item.user_info.nickname : item.user_name}}
作者 管理员 企业
{{itemf.name}}
{{itemc.user_info.nickname}}
{{itemc.user_name}}
回复 {{itemc.comment_user_info.nickname}}
![]()
{{itemf.name}}