Vue全家桶笔记

挣钱花388

已于 2022-05-06 15:57:05 修改

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏：来学Vue小笔记文章标签： vue.js 前端 javascript

于 2021-03-20 08:46:13 首次发布

本文链接：https://blog.csdn.net/qq_30430463/article/details/115021207

来学Vue小笔记专栏收录该内容

25 篇文章

订阅专栏

纯粹自学做的笔记：

（1）核心技术栈一览图

（2）Node环境安装

（3）Node环境升降级

该命令只支持mac linux系统，windows直接卸载重装

（4）Git安装和配置

（5）VsCode的Git地址

（6）存储密码-SSH添加密钥

（7）VueCli4.0安装

（8）vue-cli指定版本安装

安装新的版本前，需要先把之前安装的版本卸载掉。
vue卸载：npm uninstall vue-cli -g（3.0以下版本卸载）
                npm uninstall -g @vue/cli（3.0以上版本卸载）
vue安装：npm install -g @vue/cli （安装的是最新版）
                npm install vue-cli@2.9.6 （指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本号）
                npm install -g @vue/cli@3.11.0（指定版本安装【指定版本为3.0以上版本】，其中3.11.0为版本号）
vue版本查看：vue -V

（9）前端跨域解决方案

创建一个vue.config.js文件

module.exports = {
  devServer:{
    host:'localhost',
    port:8080,
    proxy:{
      '/api':{
        target:'https://www.imooc.com',
        changeOrigin:true,
        pathRewrite:{
          '/api':''
        }
      }
    }
  }
}

（10）插件安装

（11）router.js

注意带/的是绝对路径

不带/的是相对路径，拼接父路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home'
import Index from './pages/index'
import Product from './pages/product'
import Detail from './pages/detail'
import Cart from './pages/cart'
import Order from './pages/order'
import OrderConfirm from './pages/orderConfirm'
import OrderList from './pages/orderList'
import OrderPay from './pages/orderPay'
import AliPay from './pages/alipay'
Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/',
      name:'home',
      component:Home,
      redirect:'/index',
      children:[
        {
          path: '/index',
          name: 'index',
          component: Index,
        }, {
          path: '/product/:id',
          name: 'product',
          component: Product,
        }, {
          path: '/detail/:id',
          name: 'detail',
          component: Detail,
        }
      ]
    },
    {
      path: '/cart',
      name: 'cart',
      component: Cart
    },
    {
      path: '/order',
      name: 'order',
      component: Order,
      children:[
        {
          path: 'list',
          name: 'order-list',
          component: OrderList,
        },
        {
          path: 'confirm',
          name: 'order-confirm',
          component: OrderConfirm,
        },
        {
          path: 'pay',
          name: 'order-pay',
          component: OrderPay,
        },
        {
          path: 'alipay',
          name: 'alipay',
          component: AliPay,
        }
      ]
    }
  ]
});