使用Vue创建一个项目的步骤

做项目前需要查看路由官方文档，动态路由匹配 ，编程式导航 ，命名路由，命名视图， 重定向， 路由传参$route，浏览器下载Vue-Devtools插件，vuex是什么(如果你需要开发一个中大型单页应用，可以使用vuex)，单向数据流view->actions->state

一、创建项目

打开控制台,
npm install -g @vue/cli --registry=https://registry.npm.taobao.org
找到项目要创建的位置
vue create 项目名
创建好，进入文件夹cd 项目名
npm run serve

创建一个 .prettierrc: 用来调节规范格式报错

   {
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none"
}

引入图片的方式

在src/assets/创建一个images文件夹用来放图片,
1、可以直接写路径src="";
2、如果图片写在JS文件里，需要在data(){return}里用require引入
图片名:require(’…/assets/images/图片地址.jpg’)，再在里 :src=“图片名”。此写法是因为webpack引入资源文件需要用require，使用的是file-loader加载器
但如果引入的是网络图片，可以不用require，直接写 xxx: ‘https://图片地址’
3、也可以用import xx from ‘…/assets/images/blabla.jpg’

二、自定义项目图标和标题

自定义一个项目的图标
百度搜索fav icon，在线制作一个图标，把项目图片传上去，选择图标大小，点击生成icon图标生成了一个.icon的文件，打开public,把原有的favicon替换掉，别忘记把图标名改成原有图标的图标名
自定义项目的title
找到index.html，把title改成项目标题

三、 写页面

src/views新建页面，Cart.vue, User.vue, Login.vue…
1、Login.vue:
登录按钮添加点击事件LoginHandle
// 登录成功之后把token写入本地存储

 loginHandle() {
      localStorage.setItem('token', '123')
      this.$router.push({
        name: 'User'
      })
    }

2、User.vue:
写一个退出按钮，点击事件logOut，点击之后跳转到登录页

  logOut() {
   
  localStorage.removeItem('token')
  this.$router.push({
   
    name: 'Login'
  })
}

四、写路由

router/index.js
为user、cart添加meta属性needLogin:true标记这个页面是否已登录

const routes = [
// 这里写四个(有几个页面写几个)页面的path name  component meta
 {
   
    path: '/',
    name: 'Home',
    component: Home
  },
  {
   
    path: '/cart',
    name: 'Cart',
    meta: {
   
      needLogin: true
    },
    component: () => import('../views/Cart.vue')
  },
  {
   
  ......},
  {
   
  ......}
]

路由拦截

router/index.js:
beforeEach是在所有的路由跳转之前执行,常常用来做全局拦截，to表示到哪儿去， from表示从哪儿来

router.beforeEach((to, from, next) => {

// next()表示继续执行，如果在beforeEach中不调用next就是不执行了,跳转完了就回不去了
next()

全局拦截根据写路由时给cart和user添加的meta属性needlogin判断是否登录
1.判断是否需要登录，不需要登录就next（），需要登录的话
2.判断是否已登录，登录的话，next（），未登录的话跳转到login界面

 if (to.meta.needLogin) {
   
    if (localStorage.getItem('token')) {
   
      next()
    } else {
   
   next({
   
        name: 'Login'
      })
    }
  } else {
   
    next()