vue简介
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
文章转载：乐字节
Vue.js特点
简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
数据驱动： 自动追踪依赖的模板表达式和计算属性。
组件化： 用解耦、可复用的组件来构造界面。
轻量： ~24kb min+gzip，无依赖。
快速： 精确有效的异步批量 DOM 更新。
模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。
搭建环境
node和npm的环境是必须的，npm和node的安装不再赘述，自行解决即可。
npm 全称：Node Package Manager，就是Node的包的一个管理工具，是Node.js下的主流套件管理程式。
Node.js 用一句话来介绍就是：Node.js 是一个让 JavaScript 运行在服务端的开发平台。
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
image
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
Vue.js 目录结构
image
目录解析
目录/文件说明
build项目构建(webpack)相关代码
config配置目录，包括端口号等。我们初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块
src这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static静态资源目录，如图片、字体等。
test初始测试目录，可删除
.xxxx文件这些是一些配置文件，包括语法配置，git配置等。
index.html首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json项目配置文件。
README.md项目的说明文档，markdown 格式
1.全局安装 webpack
请先确认自己已经安装npm和node.js,使用npm全局安装 webpack，打开命令行工具输入：npm install webpack -g,安装完成后输入webpack -v，如果出现相应版本号，则安装成功
webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g
2.全局安装 vue-cli
在命令行输入npm install -g vue-cli，安装完成后输入vue-V，如果出现相应版本号，则安装成功
3.使用vue-cli来构建项目
首先新建一个文件夹作为项目存放地，cd进入其目录，输入以下命令创建项目vue init webpack vue-demo，模版下载成功后会有一些交互的项需要填写
? Project name vue-demo # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时
Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router，路由肯定要的
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我选的NPM
安装成功后，cd进入项目目录，执行命令npm install进行初始化，安装我们的项目依赖包，也就是安装package.json里的包。
4.运行项目
命令行执行npm run dev
打开浏览器访问 http://localhost:8080 就能看到欢迎页面，若页面加载不出来可能是本地8080端口被占用，需要修改一下配置文件config里的index.js的post即可
image
5.vue-cli 的 webpack 配置
从 package.json 可以看到 开发 和 生产 环境的入口。
image
dev 是开发环境的启动命令
build 是生产打包环境的命令
lint 是ESLint的检查命令 在 --ext 前加一个 --fix 可以自动修复不符合规范的代码
打包上线：运行 npm run build 命令，就可以进行打包工作了，打包完成后，会生成 dist 目录，项目上线时，把dist 目录下的文件放到服务器就可以了
在谷歌商店搜索调试工具 vue-tool 安装到浏览器，调试项目很好用
vue项目实现页面跳转
假设现在有两个页面 HelloWorld 和 Registered ，路由配置在 src/router/index.js 中
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Registered from '@/components/Registered'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/Registered',
name: 'Registered',
component: Registered
}
]
})
页面 HelloWorld
<template>
<div class="hello">
<h1>密码登录</h1>
<input placeholder="请输入用户名" type="text" name="userName"/>
<br><br>
<input placeholder="请输入密码" type="text" name="passWord"/>
<br><br>
<input type="submit" value="登录" />
<button @click="go">点我跳转</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
msg1: 'hello my app'
}
},
methods:{
go(){
this.$router.push('/Registered')
}
}
}
</script>
页面 Registered
<template>
<div class="hello">
<h1>我是Registered</h1>
<button @click="back">点我返回</button>
</div>
</template>
<script>
export default {
name: 'Registered',
data () {
return {
}
},
methods:{
back(){
this.$router.push('/')
}
}
}
</script>
在HelloWorld中点击按钮跳转到Registered，在Registered中点击按钮也可以返回到HelloWorld，实现的效果如下图:
HelloWorld 页面
image
Registered 页面
image
项目地址
文章转载：乐字节