目录
0.开发项目流程
1、书写静态页面
2、拆分组件
3、获取服务器的数据动态展示
4、完成相应的动态业务逻辑
1.创建项目
在对应目录下使用脚手架创建项目
vue create vue_shop
创建项目后,先了解对应的目录结构
node_modules:项目依赖文件夹
public:一般放置一些静态资源(图片等),放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动打包到dist文件夹中
src:源代码文件夹
----assets:放置静态资源(一般放置多个组件共用的静态资源),在webpack打包时,会把此文件夹中的静态资源当做一个模块打包到js文件中
----components:放置非路由组件(全局组件)
----App.vue:项目的唯一根组件,vue当中的组件都是.vue
----main.js:程序入口文件,也是整个程序当中最先执行的文件
.gitgnore:git忽略文件
babel.config.js:配置文件,与babel相关,可以把ES6自动翻译为ES5
package-lock.json:缓存性文件,记录了项目中的依赖包是哪里来的,方便后续的扩展和变更
package.json:项目信息,记录了项目叫什么、有哪些依赖、项目怎么运行等
README.md:说明性文件
2.项目的其他配置
2.1 自动打开浏览器
在package.json下 script属性的serve里添加 --open
"serve": "vue-cli-service serve --open"
2.2 eslint校验功能关闭
在根目录下创建vue.config.js文件,并在其中添加以下代码:
module.exports={
// 关闭eslint
lintOnSave:false
}
2.3 src文件夹别名
可以将src目录配置为@,之后引入的所有文件,凡是带了@的,都会到对应的src目录中找,而使用exclude将node_modules和dist排除后,vscode就不会在这两个目录里面查找文件了
在根目录下创建jsconfig.json文件并添加如下代码
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}
3.项目路由分析
路由组件:Home首页路由组件、Search路由组件、login登录路由、register注册路由
非路由组件:Header(所有页面都有)、Footer(首页、搜索页)
4.搭建非路由组件
在components目录下创建Header 和 Footer文件夹,Header、Footer下创建images文件夹放入图片,并创建index.vue
在App.vue中引入注册使用Header、Footer组件
5.搭建路由组件
5.1 配置并搭建路由
搭建路由组件需要vue-router,注意使用vue2需要使用3版本的vue-router,最新版本只能vue3使用
npm i vue-router@3 --save
在src目录下新建pages和router文件夹,用来存放所有的路由组件,pages里分别建立各个路由组件的文件夹,router文件夹下的index.js用来配置路由
配置路由:
import Vue from "vue";
import VueRouter from "vue-router"
// 使用插件
Vue.use(VueRouter)
// 引入路由组件
import Home from '@/pages/Home'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
import Search from '@/pages/Search'
// 配置路由
export default new VueRouter({
routes:[
{
path:'/home',
component:Home
},
{
path:'/search',
component:Search
},
{
path:'/login',
component:Login
},
{
path:'/rigister',
component:Register
},
// 重定向,在项目跑起来的时候,访问/,立刻定向到首页
{
path:'',
redirect:'/home'
}
]
})
在入口文件main.js注册路由
import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 注册路由
router
}).$mount('#app')
对登录、注册和logo的路由跳转使用声明式导航<route-link></route-link>,如下
<router-link to="/login">登录</router-link>
搜索使用编程式导航,给对应的搜索按钮button绑定click事件
<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">搜索</button>
同时配置methods
methods:{
goSearch(){
this.$router.push('/search')
}
}
5.2 总结
5.2.1路由组件和非路由组件的区别
1、路由组件一般放在views和pages文件夹;非路由组件放在components文件夹中
2、路由组件一般需要在router文件夹中进行注册,使用的即为组件的名字;非路由组件在使用的时候一般都是以标签的形式使用。
3、注册完路由,不管是路由组件还是非路由组件,身上都有$route和$router属性
5.2.2$router和$route的区别
$route一般用于获取路由信息,路径、params、query参数等
$router一般用于编程式导航跳转路径,push、replace
5.2.3路由的跳转
路由的跳转分为——
声明式导航<route-link></route-link>
编程式导航push|replace
6.组件显示与隐藏
通过v-show指令,结合路由元信息里面的meta值来控制footer组件的显示与隐藏,设置如下:
<Footer v-show="$route.meta.show"></Footer>
routes:[
{
path:'/home',
component:Home,
meta:{show:true}
},
7.路由传参
路由传参,参数的写法:
params:属于路径当中的一部分,在配置路由时需要占位