table of Contents
VUE environment to build
1, the installation node
Official website to download the installation package, fool installation: https: //nodejs.org/zh-cn/
2, installation cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
3, install scaffolding
cnpm install -g @vue/cli
4, empty the cache processing
npm cache clean --force
VUE project creation
1. Create a project
vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件2, start / stop project
npm run serve / ctrl+c
// 要提前进入项目根目录3, packing project
npm run build
// 要在项目根目录下进行打包操作VUE project document presents
1, the project directory
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖 (不同电脑依赖需要重新构建)
public: 共用资源
src: 项目目标,书写代码的地方
-- assets:资源
-- components:小组件
-- views:视图组件（页面组件）
-- App.vue:根组件，固定五行代码
-- main.js: 项目入口，总脚本文件 - 配置所有环境，加载根组件
-- router.js: 路由文件，规定路径与页面组件对应关系
-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)2, the configuration file: 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 file
<template>
<!-- 模板区域 -->
</template>
<script>
// 逻辑代码区域
// 该语法和script绑定出现
export default { // 固定导出
}
</script>
<style scoped>
/* 样式区域 */
/* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>
vue request lifecycle:
浏览器请求/user => router插件映射User.vue组件 => User.vue组件替换App.vue中的<router-view />占位符
注： i) 可以用 <router-link to="/user">用户页</router-link>完成标签跳转
ii) this.$router.push('/user')完成逻辑跳转VUE components
组件文件内部有一下三部分：
template：
template标签负责组件的html结构：有且只有一个根标签
script：
script标签负责组件的js逻辑：逻辑固定导出 export default {组件内容}
style：
style标签负责组件的css样式：scoped保证样式的组件化 - 样式只在该组件内部起作用Configuring Global Style
In main.js file write the following line of code in any two lines of code,
@ Represents the absolute path to the src folder, the official advocate require static load file
// import '@/assets/css/global.css'
require('@/assets/css/global.css');
Routing logic jump, jump to the home page, for example
1、去组件文件的template中，在需要设置跳转的标签中设置点击事件@click="goHome"，
2、去script中的export default下面的methods中写：
goHome（）{this.$router.push({name: 'home'});}
注意：
this.$router; // 控制路由跳转
this.$route; // 控制路由数据
this.$router.go(2); // go是历史记录前进后退，正为前进，负为后退，数字为步数Route Redirection
Redirection means, when a user inputs a route, but no corresponding page components, the route will be set to point to another route, the route to access to the corresponding page. This setup is redirected. Actually set up multiple routes to the same page. To the home page, for example:
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
redirect: '/', // 这就是路由的重定向
},
];Lifecycle hook
1）一个组件从创建到销毁的众多时间节点回调的方法
2）这些方法都是vue组件实例的成员
3）生命周期钩子的作用就是满足在不同时间节点需要完成的事
最常用的是 created(){} | mounted(){}
除此之外还有：
beforeCreate
beforeMount
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured
注意：
这些生命周期钩子自动绑定了this，不能使用箭头函数来定义方法，