Vue项目环境搭建
1) 安装node
官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/
2) 换源安装cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org
3) 安装vue项目脚手架
>: cnpm install -g @vue/cli
注:2或3终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force
Vue项目创建
1) 进入存放项目的目录 d: 切换D盘 cd D:\python_workspace\day66\代码
2) 创建项目 vue create v-proj
3) 项目初始化 选择 Manually select features
默认选择的有Babel Linter / Formatter 在添加Router 和 Vuex
选择YES
选择第一个,直接进入
直接第一个进入
选择第一个In dedicated config files,第一个自己处理
选择NOT
加载环境
选择改变端口号的地方,然后点击左边加号,选择npm,然后在右边Name中填写v-proj,
在pycharm中选择settings文件夹,选择Plugins,在右侧搜索框中搜索VUE,下载
pycharm配置并启动vue项目
1) 用pycharm打开vue项目
2) 添加配置npm启动
终端启动vue cd D:\python_workspace\day66\代码\v-proj cnpm run serve
vue组件(.vue文件)
# 1) template:有且只有一个根标签
# 2) script:必须将组件对象导出 export default {}
# 3) style: style标签明确scoped属性,代表该样式只在组件内部起作用(样式的组件化)
App.vue
<template> <div id="app"> <!--url路径会加载不同的组件 /red => RegPage | /blue => BluePage 替换router-view标签,完成也买你切换--> <router-view/> </div> </template>
全局脚本文件main.js(项目入口)
import Vue from 'vue' //加载vue环境 import App from './App.vue' //加载根组件 import router from './router' //加载路由环境 import store from './store' //加载数据仓库环境 Vue.config.productionTip = false; //配置全局样式 import '@/assets/css/global.css' new Vue({ el: '#app', router, store, render: function (readFn) { return readFn(App); }, });
vue项目启动生命周期
1) 加载mian.js启动项目
i) import Vue from 'vue' 为项目加载vue环境
ii) import App from './App.vue' 加载根组件用于渲染替换挂载点
iii) import router from './router' 加载路由脚本文件,进入路由相关配置
2) 加载router.js文件,为项目提供路由服务,并加载已配置的路由(链接与页面组件的映射关系)
注:不管当前渲染的是什么路由,页面渲染的一定是根组件,链接匹配到的页面组件只是替换根组件中的
<router-view></router-view>
新增页面三步骤
1) 在views文件夹中创建视图组件
2) 在router.js文件中配置路由
3) 设置路由跳转,在指定路由下渲染该页面组件(替换根组件中的router-view标签)
组件生命周期钩子
# 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期
# 2)在组件创建到销毁的过程中,会出现众多关键的时间节点,如 组件要创建了、组件创建完毕了、组件数据渲染完毕了、组件要被销毁了、组件销毁完毕了 等等时间节点,每一个时间节点,vue都为其提供了一个回调函数(在该组件到达该时间节点时,就会触发对应的回调函数,在函数中就可以完成该节点需要完成的业务逻辑)
# 3)生命周期钩子函数就是 vue实例 成员
views\Home.vue
<template> <div class="home"> <Nav /> <div class="router"> <button type="button" @click="goPage('/')">主页</button>
<button type="button" @click="goPage('/red')">红页</button>
<button type="button" @click="goPage('/blue')">蓝页</button> <button type="button" @click="goBack('/')">返回上一页</button> </div> </div> </template> <script> import Nav from '@/components/Nav.vue' export default { name: 'home', components: { Nav }, methods: { goPage(page) { let currentPage = this.$route.path; if (currentPage !== page){ this.$router.push(page); } }, goBack(){ this.$router.go(-1) }, goPageName(pageName) { // alert(name) this.$router.push({ name: pageName }) } } } </script>
views\BluePage.vue
<template> <div class="blue-page"> <Nav></Nav> </div> </template> <script> import Nav from '@/components/Nav' export default { name: "BluePage", components: { Nav } } </script> <style scoped> .blue-page { width: 100vw; height: 100vh; background-color: blue; } </style>
views\RedPage.vue
<template> <div class="red-page"> <Nav></Nav> <h1 class="title" @click="alterTitle">{{ title }}</h1> </div> </template> <script> import Nav from '@/components/Nav' export default { name: "RedPage", data() { return { title: '红页' } }, methods: { alterTitle() { alert(this.title) } }, components: { Nav }, beforeCreate() { console.log('组件创建了,但数据和方法还未提供'); // console.log(this.$data); // console.log(this.$options.methods); console.log(this.title); console.log(this.alterTitle); }, // 该钩子需要掌握,一般该组件请求后台的数据,都是在该钩子中完成 // 1)请求来的数据可以给页面变量进行赋值 // 2)该节点还只停留在虚拟DOM范畴,如果数据还需要做二次修改再渲染到页面, // 可以在beforeMount、mounted钩子中添加逻辑处理 created() { console.log('组件创建了,数据和方法已提供'); // console.log(this.$data); // console.log(this.$options.methods); console.log(this.title); console.log(this.alterTitle); console.log(this.$options.name); }, destroyed() { console.log('组件销毁完毕') } } </script> <style scoped> .red-page { width: 100vw; height: 100vh; background-color: red; } .title { text-align: center; cursor: pointer; } </style>
components/Nav.vue
<template> <div class="nav"> <ul> <li :class="{active: currentPage === '/'}"> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage === '/red'}"> <router-link to="/red">红页</router-link> </li> <li :class="{active: currentPage === '/blue'}"> <router-link to="/blue">蓝页</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav", data(){ return { currentPage:'' } }, created() { this.currentPage = this.$route.path; } } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: orange; } .nav li { float: left; font: normal 20px/60px '微软雅黑'; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor:pointer; background-color: aquamarine; } .nav li a { display: block; height: 60px; padding: 0 20px; } </style>
router.js
import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import RedPage from './views/RedPage.vue' import BluePage from './views/BluePage.vue' Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/red', name: 'red', component: RedPage }, { path: '/blue', name: 'blue', component: BluePage }, ] })