前言
使用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" } ]
