Vue脚手架
vue脚手架指的是vue-cli
它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板
webpack可以看做是模块打包机: 它会分析项目结构，找到js模块以及其它的一些浏览器不能直接运行的拓展语言[Scss、TypeScript]等，并将其打包为合适的格式以供浏览器使用
脚手架安装
要想使用vue脚手架
windows下配置cnmp环境
首先通过nodejs官网下载nodejs，这之后你将具有一个类似pip的包管理工具npm
默认的使用NPM可能会因为网络问题而导致无法使用或延迟居高，可以使npm升级为cnpm，从国内淘宝镜像中加载所需的npm软件源
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 设置安装包缓存路径
cnpm config set cache "C:\nodejs\node_cache"
- 设置安装包位置
cnpm config set prefix "C:\nodejs\node_global"
之后使用-g命令安装的模块存储在C:\nodejs\node_global\node_modules里
请按照个人需求设置你的文件位置
npm config set cache "C:\nodejs\node_cache"
webpack 可以帮助自动对js、css等资源进行打包，避免了多次对vue.js的导入使用，可以方便的进行路由管理
- 安装
vue脚手架
cnpm install vue-cli -g
-g参数代表全局位置安装，这样可以在环境变量生效的情况下直接在命令行等工具下使用vue命令行进行项目的开启
如果是使用mac的同学道理是类似的，通过安装nodejs之后，设置npm，并安装vue即可，如果无法使用命令，可以检查环境变量配置等问题
第一个项目
通过vue-cli脚手架开启一个项目
vue init webpack myproject
- Project name: 项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。
- Project description: 项目描述，直接回车
- Author：作者
- vue build: 构建方式 默认即可
- install vue-router? 是否安装vue的路由插件
- Use ESLint to lint your code? 是否使用ESLint检测你的代码？
（ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。）
- Pick an ESLint preset:选择分支风格
1.standard(https://github.com/feross/standard) js的标准风格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github 地址说是JavaScript最合理的方法
3.none (configure it yourself) 自己配置
- Setup unit tests? 是否安装单元测试
- Pick a test runner 选择一个单元测试运行器
1.Jest（Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架）
2.Karma and Mocha
3.none
- Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch
（E2E，也就是End To End，就是所谓的“用户真实场景”。）
- Should we run 'npm install' for you after the project has been created?
项目创建后是否要为你运行“npm install”?
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)
- 启动开发服务器
cd myproject # 进入目录
cnpm install # 安装依赖
cnpm run dev # 开启服务
vue启动服务之后，是通过一个小型的express服务进行测试开发环境部署，在这个服务中，主要是通过webpack-dev-middleware和webpack-hot-middleware这两个中间件完成，并且会在每次代码对于src目录下的代码进行修改时，服务端会动态检测并让浏览器自动刷新
- 项目目录介绍
- src # 主开发目录，所有的单文件组件都会放在这个目录下
- static # 项目静态目录，所有的css、js都会放在这个文件夹下
- dist # 项目打包发布文件夹，最后要上线单文件夹项目都在这个文件夹中
- node_modules # node的包目录
- config # 配置目录，主要用于区分开发环境，测试环境，线上环境的不同
- build # 项目打包时依赖的目录，之后这其中的内容将会部署发布
App.vue
在vue项目中，App.vue文件用来渲染子组件页面，同时要记得去掉vue的logo
<template>
<div id="app">
<router-view />
</div>
</template>
ES6语法
ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法
ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法，所以掌握这些常用的ES6语法是必须的
并且在vue脚手架中，也需要大量配合es6语法进行代码编写
变量声明
let：定义封闭作用域的变量，并且变量只能声明一次const：定义封闭作用域的常量，并且变量只能声明一次
let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字这两个关键字和
var的区别是，它们声明的变量没有预解析，无法脱离定义空间使用
let和const的区别是，let声明的是一般变量，const申明的常量，不可修改
console.log(a) // undefined
console.log(b) // b is not defined
console.log(c) // c is not defined
var a = 1
var a = 2
let b = 2
// let b = 3 // Identifier 'b' has already been declared
const c = 3
// const c = 4 // Identifier 'c' has already been declared
c = 4 // Assignment to constant variable
箭头函数
可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定this，继承外部作用域下的变量
这解决了JavaScript中this指定混乱的问题
- 定义函数的一般方式
function func(){
...
}
- 匿名赋值创建函数
var func = function(){
...
}
- 箭头函数的写法
var func = (a, b) => {
// 这样的函数在嵌套时，会自动绑定外部作用域下的this
}
var func = a => {
// 一个参数时，可以省略参数
}
var vm = new Vue({
el: "#container",
data: { message: "abcdef", },
methods: {
show() {
console.log("这是show函数:", this.message),
func = () => {
console.log("我是内部函数:", this.message)
},
func(), // 调用一下这个内部函数
}
}
})
<div id="container">
<button @click="show">按钮</button>
</div>
组件开发
在脚手架中，原先的页面逻辑将会被拆分成单独的一个个后缀为.vue的组件
这些vue的组件将相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件
这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用
组件文件一般定义在src目录下的components文件夹里
template标签定义HTML部分
<teamplate>
<div class="" @click="">
<label>
账号
<input type="text">
</label>
</div>
</teamplate>
js写成模块导出的形式
// 使用export default命令，为模块指定默认输出
export default{
data: function(){
return {
name:"张三",
age:16,
}
}
}
组件样式编写，如果含有scope关键字，表示这些样式是组件局部的，
<style scoped>
.beauty{
width:100px;
line-height:50px;
border-bottom:1px solid #ddd;
margin:0px auto;
}
</style>
路由配置
如果脚手架项目选择安装了vue-router组件，那么可以很方便的进行组件的路由映射
vue-router也是官方支持的路由库
默认的，vue-router的路由配置在项目的src/router/index.js中
在路由映射文件中导入组件时，可以使用@符号，@代表从src目录起；比如
import index from '@/components/index'
定义相关组件的路由，可以通过初始化vue-router对象
import index from '@/components/index'
import Router from 'vue-router'
export default new Router({
mode: 'history',
routes: [
{
path: '/', // 访问路径
component: index,
},
...
]
})
构建好的路由对象，需要通过Vue.use加载
import Vue from 'vue'
Vue.use(Router)
路由渲染
在App.vue中，会通过<router-view></router-view>标签进行路由加载
这也可以简写为: <router-view/>，该标签会自动将此时的路由对应的映射组件，渲染到页面上
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
比如路由中输入/index，那么router-view会根据在路由映射处的规则，渲染/index对应的页面
