VUE之项目搭建实施
一:项目环境搭建
(1)基础简介
''' node 类似于Python解释器 npm 类似于pip安装商城 vue 类似于Django框架 '''
(2)环境创建
官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ # 安装node
npm install -g cnpm --registry=https://registry.npm.taobao.org ''' 1:安装node节点会自动安装npm软件商城 2:更换npm的更新源 从国外更为国内淘宝源 '''
cnpm install -g @vue/cli # 安装vue项目脚手架
npm cache clean --force # 2或3终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤
(3)项目创建
1) 进入存放项目的目录 >: cd *** 2) 创建项目 >: vue create 项目名 3) 项目初始化
二:pycharm配置并启动vue项目
三:VUE项目结构分析
├── v-proj | ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └── index.html // 当前项目唯一的页面 | ├── src | | ├── assets // 静态资源img、css、js | | ├── components // 小组件 | | ├── views // 页面组件 | | ├── App.vue // 根组件 | | ├── main.js // 全局脚本文件(项目的入口) | | ├── router.js // 路由脚本文件(配置路由 url链接 与 页面组件的映射关系) | | └── store.js // 仓库脚本文件(vuex插件的配置文件,数据仓库) | ├── README.md └ └── **配置文件
四:VUE组件分析
(1)创建思路
(1)一个template模板中只有一个根标签
(2)script必须将组件导出 export default{}
(3)style标签明确scoped属性,代表该样式只在组件内部起作用(样式的组件化)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="home"> <!-- 页面渲染--> <Test></Test> <Test2></Test2> </div> </template> <script> // 导入外部标签 import Test from "../components/Test"; import Test2 from "../components/Test2"; export default { name: 'home', components: { // 注册标签 Test2, Test } } </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="test"> <p>test1</p> </div> </template> <script> export default { // 将模板导出 name: "Test" } </script> <style scoped> <!-- 设置标签样式--> .test{ color: red; } </style>
五:全局脚本文件main.js(配置项目入口)
import Vue from 'vue' // 加载VUE环境 import App from './App.vue' // 加载根组件 import router from './router' // 加载路由 import store from './store' // 加载仓库 Vue.config.productionTip = false; // 原始项目环境 new Vue({ router, // 路由 store, // 仓库 render: h => h(App) }).$mount('#app'); // 挂载点
// 改写环境 new Vue({ el:'#app', // 挂载点 此挂载点是与App.vue根组件有关 router, // 配置路由 store, render:function (readFn) { // 进行根组件渲染 return readFn(App); // 将上述导入的根组件APP传出 } });
六:VUE项目启动的生命周期与页面组件的运用
(1)请求过程
(1)加载main.js进入项目启动入口
1: import Vue from 'vue' 为项目加载vue环境 2: import App from './App.vue' 加载根组件用于渲染替换挂载点 3: import router from './router' 加载路由脚本文件,进入路由相关配置
(2)加载router.js文件 为项目提供路由服务(页面与路由的映射关系)
''' 1:不管当前页面加载的是什么路由 页面一定加载的是根组件 2:页面加载的只是替换根组件的路由 3:根组件路由<router-view> </router-view>
'''
(3)若路由发送改变 发生改变的路由 会替换原有根组件<router-view></router-view>路由
(2)加载的文件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import Vue from 'vue' // 加载VUE环境 import App from './App.vue' // 加载根组件 import router from './router' // 加载路由 import store from './store' // 加载仓库 Vue.config.productionTip = false; // 原始项目环境 new Vue({ router, // 路由 store, // 仓库 render: h => h(App) }).$mount('#app'); // 挂载点
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import BluePage from './views/BluePage' import RedPage from './views/RedPage' Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { // 路由添加 path: '/red', name: 'RedPage', component: RedPage }, { path: '/blue', name: 'BluePage', component: BluePage } ] })
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div id="app"> <!-- 1:url路径加载不同的页面 2:完成路由的替换 --> <router-view></router-view> </div> </template>
七:全局样式文件配置
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
html, body, h1, h2, ul, p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
import '@/assets/css/global.css' // main.js 全局加载CSS样式
八:新增页面三步走
(1)在views文件夹下创建视图页面
(2)在router.js中配置路由 注册文件
(3)在App.vue中替换路由
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="YellowPage"> <Nav></Nav> </div> </template> <script> import Nav from "../components/Nav"; export default { name: "YellowPage", components:{ Nav } } </script> <style scoped> .YellowPage{ /*高度满屏*/ height: 100vh; /*宽度满屏*/ width: 100vw; background: yellow; } </style>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import YellowPage from "./views/YellowPage";
{
path: '/yellow',
name: 'YellowPage',
component: YellowPage
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div id="app"> <!-- 1:url路径加载不同的页面 2:完成路由的替换 --> <router-view></router-view> </div> </template>
九:组件生命周期钩子
https://cn.vuejs.org/v2/api # 参考官方链接
(1)定义:一个组件从创建到销毁被称之为组件生命周期
(2)生命周期过程:
(1)创建之前,创建完毕,组件数据渲染,组件销毁,销毁完毕
(3)每一个时间节点 对应一个回调函数 每一个时间节点在对应的回调函数执行逻辑代码
(4)beforecreate:组件创建了 但是方法和属性还未提供
(5)create组件创建了 数据和方法已经提供
(6)destroyed组件销毁完毕
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="RedPage"> <Nav></Nav> </div> </template> <script> import Nav from "../components/Nav"; export default { name: "RedPage", data() { return { title: '红页' } }, components: { Nav }, methods: { alterTitle() { alert(this.title) } }, beforeCreate() { console.log(this.title); // 调用属性 console.log(this.alterTitle) // 调用方法 }, created() { console.log(this.title); console.log(this.alterTitle) }, destroyed() { console.log('页面被销毁了') } } </script> <style scoped> .RedPage { height: 100vh; width: 100vw; background: red; } </style>
十:高亮路由标签案例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="nav"> <ul> <!-- 此方式不支持 会重新加载页面--> <!-- <li><a href="/">主页</a></li>--> <li @click="changePage('/')" :class="{active:currentPage==='/'}"> <router-link to="/"> 主页 </router-link> </li> <li @click="changePage('/red')" :class="{active:currentPage==='/red'}"> <router-link to="/"> 红页 </router-link> </li> <li @click="changePage('/yellow')" :class="{active:currentPage==='/yellow'}"> <router-link to="/"> 黄页 </router-link> </li> <li @click="changePage('/blue')" :class="{active:currentPage==='/blue'}"> <router-link to="/"> 蓝页 </router-link> </li> </ul> </div> </template> <script> export default { name: "Nav", data() { return { // 直接在created钩子函数中,获取当前的url路径,根据路径更新currentPage currentPage: '' } }, methods: { changePage(path) { this.$router.push(path) // 进行路由跳转 } }, created() { // 当前组件加载成功,要根据当前实际所在的路径,判断单选激活标签 this.currentPage = this.$route.path; } } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: peru; } .nav li { float: left; font: normal 20px/60px '微软雅黑'; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="RedPage"> <Nav></Nav> </div> </template> <script> import Nav from "../components/Nav"; export default { name: "RedPage", data() { return { title: '红页' } }, components: { Nav }, methods: { alterTitle() { alert(this.title) } }, beforeCreate() { console.log(this.title); // 调用属性 console.log(this.alterTitle) // 调用方法 }, created() { console.log(this.title); console.log(this.alterTitle) }, destroyed() { console.log('页面被销毁了') } } </script> <style scoped> .RedPage { height: 100vh; width: 100vw; background: red; } </style>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="BluePage"> <Nav></Nav> </div> </template> <script> import Nav from "../components/Nav"; export default { name: "BluePage", components: { Nav } } </script> <style scoped> .BluePage { height: 100vh; width: 100vw; background: blue; } </style>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="YellowPage"> <Nav></Nav> </div> </template> <script> import Nav from "../components/Nav"; export default { name: "YellowPage", components:{ Nav } } </script> <style scoped> .YellowPage{ /*高度满屏*/ height: 100vh; /*宽度满屏*/ width: 100vw; background: yellow; } </style>