vue项目搭建
环境搭建
安装node环境
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装脚⼿架
cnpm install -g @vue/cli
清空缓存处理
npm cache clean --force
项目命令
创建项目
vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件
启动/停止项目
npm run serve / ctrl+c
// 要提前进入项目根目录
打包项目
npm run build
// 要在项目根目录下进行打包操作
小知识点
箭头函数
let zx=()=>{
return 6
}
let zx=()=>5
let zx=n=>n*10
let zx=(a,b)=>a*b
函数原型
在类的prototype中的属性在，所有实例中都可以使用
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();
Fn.prototype.num = 888;
console.log(f1.num);
console.log(f2.num);
let f3 = new Fn();
console.log(f3.num);
项目框架介绍
项目目录
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
-- assets:静态资源
-- components:组件
-- router:路由文件
-- store:状态库文件
-- views:视图组件
-- App.vue:根组件
-- main.js: 入口js
package.json: 项目配置文件
main.js
1.加载vue,router,store等配置，和自定义的js，css等
2.加载根组件，绑定挂载点（在App.vue中需要有挂载点）
3.浏览器发起请求，router组件会更具url匹配组件，替换App.vue中的占位符<router-view/>
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')
router
路由
@表示/src表示src的绝对路径
也可以使用../这种相对路径
import User from '@/views/User.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
#导入相关的组件
import Home from '../views/Home.vue'
Vue.use(VueRouter)
#配置路由组件映射关系
const routes = [
{
path: '/',
name: 'home',
component: Home
}
]
const router = new VueRouter({
#开启浏览历史
mode: 'history',
#配置目录
base: process.env.BASE_URL,
routes
})
#导出js，可以被main.js引用
export default router
界面组件
1.有且只有一个根标签
2.style中的scoped默认为True，表示样式只会影响当前组件，不会影响其他组件，data是return方式的
3.js要注意一定要导出export default
<template>
<div>
<h1>用户界面</h1>
</div>
</template>
<script>
export default {
name: "User",
comments: {
},
data() {
return {
}
}
}
</script>
<style scoped>
</style>
组件实现跳转
vue跳转不能使用a标签，因为a标签跳转会刷新界面，而vue的核心是跟换组件或者数据
<router-link to="/">主页</router-link>
注意
点击的时候会加上这个类，可以给这个类加上样式来识别点击的按钮
/*router-link渲染的a激活时的状态*/
a.router-link-exact-active {
color: pink;
}
方法跳转
$router就是根组件的vue对象的属性
methods:{
goDetail(){
this.$router.push('/book/detail');
this.$router.push({
'name': 'book-detail'
})
}
}
前进后退
go的参数的正负表示历史记录的前进和后退
methods:{
go(){
this.$router.go(-1);
}
}
路由重定向
当浏览器访问/index的时候，最后浏览器留下的url是/不是/index，但是抓包抓到的请求是/index
{
path: '/',
name: 'home',
component: Home
},{
path:'/index',
redirect:'/'
}
v-for---:key建立缓存
key属性是为标签建立缓存的标识，不能重复，在循环组件下，必须设置
<Books v-for="book in books" :book="book" :key="book.title"></Books>
静态资源
当组件自己使用静态资源可以使用相对路径取，但是不能使用绝对路径（使用绝对路径，浏览器会在路径前面拼接上url，请求资源的url会不对）
<img src="../assets/img/西游记.jpg"/>
跨组件资源路径传输require
路径要使用相对路径
{id:1, img:require('../assets/img/西游记.jpg'),
组件的生命周期--钩子
一个组件，会在页面中渲染，也会销毁存放到内存(不渲染) => 加载组件到销毁组件
从加载一个组件到销毁该组件，整个生命周期中存在很多特殊的时间节点(组件要创建了，创建成功了，要加载了，加载成功了， 要更新数据了，数据更新完毕了，要销毁了，销毁成功了)，这些特殊的时间节点，vue都提供了对应的回调方法，来辅助完成在这些时间
//还不能拿到数据
beforeCreate() {
window.console.log('该组件要被创建了');
},
// 最常用的钩子函数：组件加载后，可以请求后台数据，更新组件数 据；组件间路由传参的值获取
created() {
window.console.log('该组件已经创建了');
},
//当组件不在活动界面
destroyed() {
window.console.log('该组件已经销毁了')
}
视图组件传参
#路由配置
path:'/book/detail/:pk',
name: 'book-detail',
component:BookDetail
#传递参数
#path
<router-link :to="'/book/detail/' + book.id"></router-link>
#name
<router-link :to="{name: 'book-detail', params{pk:book.id}}">}</router-link>
#methods
this.$router.push(`/book/detail/${id}`);
this.$router.push({
name: 'book-detail',
params: {pk: id},
});
#接收参数
let pk = this.$route.params.pk;
小知识点
$router管理路由跳转的
$route管理路由数据的
可以获取当前url的路径