搭建vue项目的步骤:

  1. 首先node.js 安装,然后在shell里面全局安装vue-cli:命令是npm install -g@vue-cli
  2. 然后整个工程包加上名字就出现了
  3. 将工程文件push到github上去
  4. 使用命令行npm install vue-router

(下回安装新的vue插件时,直接cd到工程文件中,然后npm install xxxx(package.json会自动更新安装包)

然后node_modules包里就有了安装程序包,然后就可以直接import用了)

src下属的文件夹:

  • api:定义接口,跟后端交互数据
  • assets:保存静态资源
  • components:定义组件,封装的表格,树状结构。
  • layout:定义页面基本布局,微商城下面的公共导航部分,首页,分类,购物车,需要公共的layout
  • router:定义前端路由
  • utils:定义公共操作,request 的网络请求,validate 的一些公共验证
  • views::定义页面文件

less的安装:(less不需要全局引入,npm安装以后可以直接使用)

  1. npm install less
  2. npm install less-loader

怎么引入iconfont:

  1. 将iconfont网上购物车的代码添加到项目,
  2. 将项目包下载放入src/assets/iconfont中,
  3. 从官网复制iconfont的unicode代码<i class="iconfont seticon" style="color:red">&#xe699;</i>

(iconfont用font-size来设置大小,而不是用width和height设置大小)

git版本回退:

  1. 穿梭前,用git log可以查看提交历史,以便确定要回退到哪个版本。
  2. HEAD指向的版本就是当前版本,因此,Git允许我们在版本的历史之间穿梭,使用命令git reset --hard commit_id。
  3. 要重返未来,用git reflog查看命令历史,以便确定要回到未来的哪个版本。

vue.use()用法:

对象自己封装install()方法等可以使用vue.use()调用,没有自己封装install()的直接使用,不需要用vue.use()。

axios 不需要使用 vue.use(axios)

tabbar的解决方式(vant-ui):

  1. 将tabbar写入layout文件夹
  2. 在router.js,导入layout组件import Layout from '@/layout',制作嵌套路由
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'

//如果使用模块化机制编程,导入 Vue 和 VueRouter,要调用 Vue.use(VueRouter)
Vue.use(Router);
// 定义路由
const routes = [

  {
    path: '/login',
    component: Layout,
    meta: {
      title: 'Login'
    }
  },

  {
    path: '/',
    redirect:'/home',
    component: () => import('@/layout'),
    children:[
      {
        path: '/home',
        component: () => import('@/views/home'),
        meta: {
          title: 'Home'
        }
      },

      {
        path: '/my',
        component: () => import('@/views/my'),
        meta: {
          title: 'My'
        }
      },