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>