Day1
Vue前台项目
技术架构：vue+webpack+vuex+vue-router-axios-less
- 封装通用组件
- 登陆注册
- token
- 守卫
- 购物车
- 支付
- 项目性能优化
Vue后台项目
技术架构：vue+webpack+vuex+vue-router-axios-scss+elmentUI
- elementUI
- 菜单权限
- 按钮权限
- 数据可视化
2、项目开始
创建一个文件夹
利用cmd加载vue create +名称
D:\项目\project-hph>vue create app
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
npm uninstall -g vue-cli
npm install -g @vue/cli
出现这个先卸载，再重新安装
node_modules文件夹放置的是项目的依赖
public文件夹放置的是静态资源（图片），webpack进行打包的时候，会原封不动的打包到dist文件夹
src源代码文件夹：
assets文件夹：一般放置的也是静态资源（多个组件公用的静态资源），需要注意的是，放置在assets文件夹里面的静态资源，在webpack打包的时候，会将静态资源当作一个模块，打包到JS文件里面。
component：非路由组件，全局组件。
app.vue ：根组件
main.js ： 程序的入口文件
babel.config.js 配置文件，es6翻译到es5
package.json 记录项目叫什么，项目依赖，怎么运行
package-lock.json
结构层 4.1 使用组件的步骤(非路由组件) -创建或者定义：components文件夹—>Header文件夹—>index.vue-上面的代码 -引入:在App.vue中引入 -注册 -使用 在静态资源public中的index.html中引入清除默认样式reser.css，reser.css放置在public中 4.2 footer 1、在footer文件夹中创建index.vue 地址：北京市昌平区宏福科技园综合楼6层 京ICP备19006430号 2、在根组件App.vue中引入Footer组件 3、引入footer的样式，在index.vue中 地址：北京市昌平区宏福科技园综合楼6层 京ICP备19006430号 5、路由组件的搭建 vue-router 在上面分析的时候，路由组件应该有四个：Home、Search、Login、Register --components文件夹：经常放置的非路由组件（公用全局组件） --pages|views文件夹：经常放置路由组件，在src中创建pages文件夹。在pages文件夹中创建Home、Search、Login、Register文件夹，在其中分别创建index.vue文件 5.1 配置路由 cnpm install --save vue-router 项目当中配置的路由一般放置在router文件夹中，在src中创建router文件夹。在router中创建index.js import Vue from 'Vue'; //使用插件 //引入路由组件 //配置路由,对外暴露 在main.js中引入路由 import Vue from 'vue' new Vue({ vue-router版本高的解决方法 在App.vue中写路由组件出口的地方 5.2 总结 路由组件和非路由组件的区别？ 5.3 路由的跳转 路由的跳转有两种形式： 在component中的Header的index.vue 尚品汇欢迎您！ 6、footer组件的显示与隐藏 显示和隐藏组件：v-if v-show footer：在home、search显示footer组件 footer组件：在登录和注册时隐藏 面试题：v-show与v-if区别? 6.1 我们可以根据组件身上的$route获取当前的路由信息，通过路由路径判断Footer显示与隐藏 在router中的index.js 的配置路由中 添加路由元信息 meta:{show：true } //配置路由的地方 //引入vue和vueRouter //使用插件 //引入路由组件 //配置路由,对外暴露 在App.vue中配置footer 6.2 配置路由的时候可以添加路由元信息meta 7、路由传参 7.1 路由跳转的方式 7.2 路由传参，参数有几种写法 params参数：属于路径当中的一部分，在配置的路由的时候需要占位 query参数：不属于路径当中的一部分，类似于AJAX中的queryString /home?k=v&kv= 不需要占位 7.2.1 路由传递参数-字符串形式 1、在Header.vue中，先获取表单数据，也就是搜索框里面输入的值。 2、收集文本框里面的值 3、在index.js 中配置路由 routes[ 4、传递搜索框里面的函数到search中 $route 在search中展示出来 7.2.2 模板字符串 //第二种：模板字符串 7.2.3 **（常用的形式）对象的写法 先在配置路由中给Search路由取个名字 { methods:{ 8、路由相关的面试题 1:路由传递参数（对象写法）path是否可以结合params参数一起使用? 2:如何指定params参数可传可不传? 如何指定params参数可传可不传，在配置路由的时候，在占位的后面加上一个问号？ 3:params参数可以传递也可以不传递，但是如果传递是空串，如何解决？ 使用undefined解决：params参数可以传递，可以不传递（空的字符串） 4: 路由组件能不能传递props数据? 可以的：三种写法 //对象写法：额外的给路由组件传递一些props //函数写法：可以把params参数、query参数，通过props传递给路由组件
样式层
帮助中心
帮助中心
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Search'
export default new VueRouter({
//配置路由
routes:[
{
path:'/home',
component:Home
},
{
path:'/search',
component:Search
},
{
path:'/login',
component:Login
},
{
path:'/register',
component:Register
},
//重定向：在项目跑起来的时候，访问 / 的时候，立马让它定向到首页
{
path:'*',
redirect:'/home'
}
]
})
//之后回到入口文件，main.js中去注册，引入路由
import App from './App.vue'
//引入路由
import router from '@/router'
Vue.config.productionTip = false
render: h => h(App),
//注册路由
router
}).$mount('#app')
(1)：卸载原有的Vue_router,并重新下载“^3.5.2”,卸载和按照的两种命令如下。
卸载原有路由：npm uninstall vue-router
安装3.0版本：npm i vue-router@3.5.2
(2)：在命名后添加--legacy-peer-deps即可绕过peerDependency自动安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。
npm i vue-router@3.5.2 -legacy-peer-deps
{
path:'*',
redirect:'/home'
}
$router：一般进行编程式导航，进行路由跳转【push|replace】
请
v-show:通过样式display控制
v-if：通过元素上树与下树进行操作
面试题:开发项目的时候，优化手段有哪些?
1:v-show|v-if
2:按需加载
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from '@/pages/Home/index'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
export default new VueRouter({
//配置路由
//在配置路由中添加meta:{show:true|false}
routes:[
{
path:'/home',
component:Home,
meta:{
show:true
}
},
{
path:'/search',
component:Search,
meta:{
show:true
}
},
{
path:'/login',
component:Login,
meta:{
show:false
}
},
{
path:'/register',
component:Register,
meta:{
show:false
}
},
//重定向：在项目跑起来的时候，访问 / 的时候，立马让它定向到首页
{
path:'*',
redirect:'/home'
}
]
})
//之后回到入口文件，main.js中去注册，引入路由
meta：路由元信息
根据当前路由的信息：route.meta.show
进行判断：show的值为true还是false
{
path:'/search/:keyword', 占位
component:Search,
meta:{
show:true
}
}
]
path:"/search/abc"
query:Object
k:"ABC"
params:Object
keyword:"abc"
fullPath:"/search/abc?k=ABC"
//this.$router.push('/search/${this.keyword}?k=${this.keyword.toUpperCase}')
path:'/search/:keyword',
component:Search,
meta:{
show:true
},
name:"search"
},
//搜索按钮的回调函数：需要向search进行跳转
goSearch(){
//路由传递参数：
//第一种：字符串形式
//this.$router.push('/search/'+this.keyword+"?k="+this.keyword.toUpperCase());
//第二种：模板字符串
//this.$router.push('/search/${this.keyword}?k=${this.keyword.toUpperCase}')
//第三种：对象
this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})
}
}
this.$router.push({path:"/search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})
答：路由传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path和params不能一起用。
答：配置路由的时候，占位了（params参数），但是路由跳转的时候就不传递。
路径会出现问题：localhost:8080/#/?k=QWE
localhost:8080/#/search?k=QWE
this.$router.push({name:"search",query:{k:this.keyword.toUpperCase()}})
path:'/search/:keyword?'
this.$router.push({name:"search",params:{keyword:''},query:{k:this.keyword.toUpperCase()}})
this.$router.push({name:"search",params:{keyword:''||undefined},query:{k:this.keyword.toUpperCase()}})
1、布尔值写法：在路由配置中
{
path:'/search/:keyword',
component:Search,
meta:{
show:true
},
name:"search",
//路由组件能不能传递props数据
//布尔值写法
props:true
},
在搜索的index.vue中
//props:{a:1,b:2}
props:($route)=>{
return{keyword:$route.params.keyword(),k:$route.query.k};
}
浙公网安备 33010602011771号