目录
VUE环境搭建
1、安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
2、安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装脚手架
cnpm install -g @vue/cli
4、清空缓存处理
npm cache clean --force
VUE 项目创建
1、创建项目
vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件2、启动/停止项目
npm run serve / ctrl+c
// 要提前进入项目根目录3、打包项目
npm run build
// 要在项目根目录下进行打包操作VUE 项目文件介绍
1、项目目录
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖 (不同电脑依赖需要重新构建)
public: 共用资源
src: 项目目标,书写代码的地方
-- assets:资源
-- components:小组件
-- views:视图组件（页面组件）
-- App.vue:根组件，固定五行代码
-- main.js: 项目入口，总脚本文件 - 配置所有环境，加载根组件
-- router.js: 路由文件，规定路径与页面组件对应关系
-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)2、配置文件：vue.config.js
module.exports={
devServer: {
port: 8888
}
}
// 修改端口,选做3、main.js
new Vue({
el: "#app",
router: router,
store: store,
render: function (h) {
return h(App)
}
})
4、.vue文件
<template>
<!-- 模板区域 -->
</template>
<script>
// 逻辑代码区域
// 该语法和script绑定出现
export default { // 固定导出
}
</script>
<style scoped>
/* 样式区域 */
/* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>
vue请求生命周期：
浏览器请求/user => router插件映射User.vue组件 => User.vue组件替换App.vue中的<router-view />占位符
注： i) 可以用 <router-link to="/user">用户页</router-link>完成标签跳转
ii) this.$router.push('/user')完成逻辑跳转VUE 组件
组件文件内部有一下三部分：
template：
template标签负责组件的html结构：有且只有一个根标签
script：
script标签负责组件的js逻辑：逻辑固定导出 export default {组件内容}
style：
style标签负责组件的css样式：scoped保证样式的组件化 - 样式只在该组件内部起作用配置全局样式
在main.js文件中写如下两行代码中的任意一行代码，
@就代表src文件夹的绝对路径，官方提倡require加载静态文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css');
路由逻辑跳转，跳转到home页为例
1、去组件文件的template中，在需要设置跳转的标签中设置点击事件@click="goHome"，
2、去script中的export default下面的methods中写：
goHome（）{this.$router.push({name: 'home'});}
注意：
this.$router; // 控制路由跳转
this.$route; // 控制路由数据
this.$router.go(2); // go是历史记录前进后退，正为前进，负为后退，数字为步数路由重定向
重定向是指，当用户输入一个路由，但没有对应的页面组件时，将这个路由设置为指向另一个路由，从而访问到那个路由对应的页面。这种设置就是重定向。实际上就是设置多个路由指向同一个页面。以home页面为例：
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
redirect: '/', // 这就是路由的重定向
},
];生命周期钩子
1）一个组件从创建到销毁的众多时间节点回调的方法
2）这些方法都是vue组件实例的成员
3）生命周期钩子的作用就是满足在不同时间节点需要完成的事
最常用的是 created(){} | mounted(){}
除此之外还有：
beforeCreate
beforeMount
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured
注意：
这些生命周期钩子自动绑定了this，不能使用箭头函数来定义方法，