前言
使用vue开发时 可以简单总结为四个步骤
- 写静态样式
- 发请求
- vuex进行三连环 actions mutations state
- dispatch获取内容 进行页面内容的渲染
(一)如何使用脚手架创建一个项目
使用Win+R 输入CMD 打开资源管理器
其中xxx是指你的项目名称
(二)对目录进行分析
node_modules:放置项目依赖的地
public:一般放置一些共用的静态资源,打包上线的时候,public文件夹里面资源原封不动打包到dist文件夹里面
src:程序员源代码文件夹
而对于src目录里面的内容
- api 发请求的
- assets 经常放置一些静态资源(图片),assets文件夹里面资源webpack会进行打包为一个模块(js文件夹里面)
- components 一般放置非路由组件(或者项目共用的组件)
- mock 当后端请求还未完成时可以自己用mock来模拟数据
- router 配置路由信息
- store 用来进行vuex三连环
- utils (目前为止学到的是可以用存放uuid的js文件)
- views 页面展示的内容
(三)进行自定义配置
3.1 项目运行,浏览器自动打开
package.json
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
3.2 关闭eslint校验
根目录下创建vue.config.js,进行配置
module.exports = {
//关闭eslint
lintOnSave: false
}
3.3 配置跨域问题
根目录下创建vue.config.js,进行配置
// 配置代理跨域问题
devServer: {
proxy: {
'api': {
target: 'http://gmall-h5-api.atguigu.cn',
}
},
}
})
其中 target:‘xxx’是你所调用接口的地址
(四)路由配置
4.1 yarn 安装路由
输入指令 yarn add vue-router
之后在src目录下创建router目录 创建两个js文件
4.2引入路由
在main.js页面中
import router from '@/router'
new Vue({
render: h => h(App),
// 注册路由相关信息 名字和值一致时可以简写
router,
}).$mount('#app')
4.3路由的相关配置
其中index.js文件的内容为
import Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)
import routes from './routes'
// 每当点击两次搜索按钮的时候 就会报错
// 原因是因为push||replace方法
// 此时需要自己手写一个push||replace方法
let oringPush = VueRouter.prototype.push;
let oringReplace = VueRouter.prototype.replace;
// 此时重写push||replace
// 第一个参数是告诉push方法 你往哪里跳转
VueRouter.prototype.push = function(location,resolve,reject) {
// 当resolve 和 reject 存在的时候 即第一次点击的时候
if(resolve && reject){
oringPush.call(this, location, resolve, reject)
}else {
oringPush.call(this, location, ()=>{},()=>{})
}
}
VueRouter.prototype.replace = function(location,resolve,reject) {
// 当resolve 和 reject 存在的时候 即第一次点击的时候
if(resolve && reject){
oringReplace.call(this, location, resolve, reject)
}else {
oringReplace.call(this, location, ()=>{},()=>{})
}
}
//此时 push||replace方法遇到连续点击两次就不会报错了
export default new VueRouter({
routes,
// 滚动行为 控制刚进页面时的页面初始状态位置
scrollBehavior () {
return { x: 0, y: 0 }
}
})
在index.js中进行了
import Vue from ‘vue’:导入Vue.js核心库。
import VueRouter from ‘vue-router’:导入Vue Router库。
Vue.use(VueRouter):将Vue Router插件注册到Vue中,使其成为Vue的一部分。
import routes from ‘./routes’:从./routes路径导入路由配置对象。
然后重写了replace和push方法 目的是防止连续进行push/replace方法时会进行报错
而scrollBehavior的作用为:定义路由切换时页面的滚动行为,这里设置为每次路由切换后页面滚动到顶部。防止在进行路由跳转的时候 页面位置不定
在routes.js文件中 就是进行引组件 配置组件内容
例如:
import Home from '@/views/Home/index.vue'
import Search from '@/views/Search/index.vue'
import Register from '@/views/Register/index.vue'
import Login from '@/views/Login/index.vue'
import Detail from '@/views/Detail/index.vue'
import AddCartSuccess from '@/views/AddCartSuccess'
import ShopCart from '@/views/ShopCart'
export default
[
// 在这里配置路由
{
path: "/home",
component: Home,
meta: { show: true }
},
{
path: "/login",
component: Login,
meta: { show: false }
},
{
path: "/register",
component: Register,
meta: { show: false }
},
{
path: "/search/:keyword?",
component: Search,
meta: { show: true },
name: 'search'
},
{
path: "/detail/:skuisd",
component: Detail,
meta: { show:true}
},
{
path: "/shopcart",
name:'ShopCart',
component: ShopCart,
meta: { show:true}
},
{
path: "/addcartsuccess",
name:'addcartsuccess',
component: AddCartSuccess,
meta: { show:true}
},
{
path: "/",
redirect: "/home"
}
]