Vue项目环境搭建
python
node ~~ python:node是用c++编写用来运行js代码的
nmp(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm
vue ~~ django:vue是用来搭建vue前端项目的
-
安装node
官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/
-
换源安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
-
安装vue项目脚手架
cnpm install -g @vue/cli
注意:2或3终端安装失败时,可以清空,npm缓存的步骤 再重复执行失败的步骤
npm cache clean --force
Vue项目创建·
-
进入存放项目的目录
切换盘符 D:
cd 文件目录
-
创建项目
vue create 项目名
利用键盘上下键,选中
Manually select features (手动选择功能)
上下键分别选中Router(路由)、 Vuex(状态管理、数据、组件通信),分别空格键就能选中
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 使用历史模式的路由器?(需要为生产环境中的索引备份进行适当的服务器设置)(Y/n) 选Y,回车,
选择In package.json ,
选中 Save this as a preset for future projects? (y/N) 把它作为未来项目的预置?(y / N) 选N,回车,然后就开始创建项目了
-
项目初始化
项目初始化default,选default下面的一行,就是Manually select features (手动选择功能)
然后cd v_proj切换到项目目录中,启动项目npm run serve,启动需要等待一会...(命令框中启动项目)
pycharm中配置并启动vue项目
用pycharm打开创建好的vue项目
添加npm启动,选择工具栏中的
Edit Configurations...
点击+号,添加npm,写项目的名字,Scripts选择server,然后apply,OK就配置成功了。
添加配置npm启动。就可以启动项目了
vue项目目录结构分析
├── v-proj 项目名
| ├── node_modules 当前项目所有依赖,一般不可以移植到其他电脑环境中
| ├── public
| | ├── favicon.ico 标签图标
| | └── index.html 当前项目唯一的页面
| ├── src 项目核心的代码文件夹
| | ├── assets 静态资源img、css、js
| | ├── components 小组件,公共组件
| | ├── views 以页面为单位的vue组件
| | ├── App.vue 根组件
| | ├── main.js 全局脚本文件(项目的入口)
| | ├── router vue的路由管理
| | | └── index.js 路由脚本文件(配置路由 url链接 与 页面组件的映射关系)
| | └── store
| | | └── index.js 仓库脚本文件(vuex插件的配置文件,数据仓库)
| ├── README.md 说明书
└ └── package.json 等配置文件
|_ tests 单元测试
vue组件(.vue文件)
-
template:有且只有一个根标签
<template> <div class="test"> </div> </template>
-
script:必须将组件对象导出 export default {}
<script> export default { name: "Test" } </script>
-
style:style标签明确scoped属性,代表该样式只在组件内部起作用(样式的组件化)
<style scoped>
</style>
全局脚本文件main.js(项目入口)
import Vue from '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')
改写
import Vue from 'vue' 加载vue环境
import App from './App.vue' 加载根组件
import router from './router' 加载路由组件
import store from './store' 加载数据仓库
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
});
项目的生命周期
-
启动项目,加载主脚本文件 main.js
加载Vue环境,创建根组件完成渲染
加载系统已有的第三方环境:router、store
加载自定义的第三方环境与自己配置的环境:后期项目不断添加
-
router被加载,就会解析router文件夹下的index.js脚本文件,完成 路由—组件 的映射关系
-
新建视图组件.vue(在views文件夹中),在路由配置(在router的index.js中),设置路由跳转(在导航栏组件中Nav.vue)
路由逻辑跳转点
<script>
export default {
name: "Nav",
methods: {
goHome() {
// console.log('去向主页');
// console.log(this.$router); // 控制路由跳转
// console.log(this.$route); // 控制路由数据
if (this.$route.path !== '/') {
// this.$router.push('/'); // 往下再跳转一页
this.$router.push({
name: 'home'
});
// this.$router.go(2); // go是历史记录前进后退,正为前进,负为后退,数字为步数
}
}
}
}
</script>
路由重定向
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
redirect: '/', // 路由的重定向
},
{
path: '/course',
name: 'course',
component: Course
},
{
// 第一种路由传参
// path: '/course/detail',
// 第二种路由传参
path: '/course/:pk/detail',
name: 'course-detail',
component: CourseDetail
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router
知点总结
-
创建项目:vue create 项目名 - babel、vue-router 、vuex
-
项目目录
node_modules依赖(不同电脑依赖需要重构,在命令框中输入cnpm install) views:页面组件 components:小组件 router/index.js:路由配置文件——路径与页面组件对应关系 App.vue:根组件 main.js:项目总脚本文件——配置所有环境,加载根组件
-
vue请求生命周期
浏览器请求/user=>router插件映射User.vue组件=>User.vue组件替换App.vue中的
占位符 <template> <div id="app"> <!--页面组件占位符--> <router-view></router-view> </div> </template>
注意:
1)可以用
用户页 完成标签跳转2)this.$router.push('/user')完成逻辑跳转
-
vue组件生命周期
生命周期钩子
1)一个组件从创建到销毁的众多时间节点回调的方法
2)这些方法都是vue组件实例的成员
3)生命周期钩子的作用就是满足在不同时间节点需要完成的事
created(){} | mounted(){}
======vue文件样式组件讲解====== <!-- template标签负责组件的html结构:有且只有一个根标签 --> <template> <div class="home"> <Nav /> <h1>主页</h1> </div> </template> <!-- script标签负责组件的js逻辑:逻辑固定导出 export default {组件内容} (外界才可以导入) --> <script> import Nav from '../components/Nav' export default { data(){ return { back_data: '' } }, methods: {}, components: { Nav, }, /** 生命周期钩子 * 1)一个组件从创建到销毁的众多时间节点回调的方法 * 2)这些方法都是vue组件实例的成员 * 3)生命周期钩子的作用就是满足在不同时间节点需要完成的事 */ beforeCreate() { console.log('Home组件要创建了'); console.log(this.back_data); }, created() { // 重要方法:在该钩子中完成后台数据的请求 console.log('Home组件创建成功了'); console.log(this.back_data); }, beforeMount() { console.log('Home组件准备加载') }, mounted() { // 特别耗时的数据请求,可以延后到组件初步加载成功后,再慢慢请求 console.log('Home组件加载完成') }, destroyed() { console.log('Home组件销毁成功了') } } </script> <!-- style标签负责组件的css样式:scoped保证样式的组件化 - 样式只在该组件内部起作用 --> <style scoped> </style> ====================================================================================== export default { name: "Course", data() { return { courses: [], } }, components: { Nav, CourseTag, }, beforeCreate() { console.log('Course组件要创建了') }, created() { console.log('Course组件创建成功了'); // 前后台开发时,是从后台请求数据 this.courses = [ { id: 1, title: '西游记', // img: 'http://...', // 实际是后台图片链接 img: require('@/assets/img/001.jpg'), // 前台逻辑中加载静态资源采用require }, { id: 3, title: '西厢记', // img: 'http://...', // 实际是后台图片链接 img: require('@/assets/img/002.jpg'), // 前台逻辑中加载静态资源采用require }, ] }, destroyed() { console.log('Course组件销毁成功了') } }
-
路由跳转
this.$router.push({name:'路由名',query:{拼接的参数}}) this.$router.go(number)
-
路由配置
第一种: { path:'/course/detail', name:'course-detail', } { path:'/detail', redirect:'/course/detail/' } this.$router.push('/course/detail'); == this.$router.push('/detail') this.$router.push('/course/detail?pk=1'); =>this.$route.query.pk 第二种: { path:'/course/detail/:pk', name:'course-detail', component:CourseDetail } this.$router.push('/course/detail/1'); =>this.$route.query.pk
-
js类的原型:类属性
-
配置全局css样式
import 别名 from ’资源‘
@就代表src文件夹的绝对路径,官方提倡require加载静态文件
import'@/assets/css/global.css' require(@/assets/css/global.css);
-
路由知识点概况
1)路由配置:router/index.js
2)路由跳转与路由渲染:
router-link、router- view、$router.push、$router.go console.log('跳转主页'); console.log(this.$router); 控制路由跳转 console.log(this.$route)); 控制路由数据 this.$router.push('/') 往下再跳转一页 this.$router.go(2) go是历史记录前进后退,正为前进,负为后退,数字为步数
3)路由传参:两种传参
第一种: <router-link :to="`/course/detail?pk=${course.id}`">{{ course.title }}</router-link> <router-link :to="{ name: 'course-detail', query: {pk: course.id} }">{{ course.title }} </router-link> 第二种: <router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link>
-
js原型补充
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { } }) </script> <script> function A() {} let a1 = new A(); let a2 = new A(); // 为A类添加原型 => 类似于类属性 A.prototype.num = 100; console.log(a1.num); console.log(a2.num); // ES6语法下类 class B { constructor(name) { this.name = name; } } let b1 = new B('Tom'); let b2 = new B('Ben'); B.prototype.count = 666; console.log(b1.count); console.log(b2.count); console.log(b1.name); console.log(b2.name); // 推导 Vue.prototype.$ajax = 12345; // this.$ajax </script> </html>