vue项目配置

一、vue-cli

1. 安装

   电脑只要安装一次就行

   npm install -g @vue/cli

2. 创建项目

   vue create hello-world

3. 启动项目

     npm run reserve

4. 修改配置vue.config.js

   配置后记得重新启动服务

   const { defineConfig } = require('@vue/cli-service')
   module.exports = {
     pages: {
       index: {
         // page 的入口
         entry: 'src/main.js',
       },
     },
     lintOnSave:false //关闭语法检查
   }

二、vue-router的使用

1. 安装

   vue3 可安装最新版：npm install vue-router --save

   vue2 安装 ：npm i [email protected]

   如果安装错了版本先卸载vue-router ：npm uninstall vue-router

2. 路由配置：

   1. 通常把路由组件放在src文件夹下的pages文件夹内
   2. src文件夹下建立一个名为router的文件夹里面放一个index.js的文件
   3. 配置路由

      //引入所需要配置的路由组件
      import Home from '@/pages/Home'
      
      import Search from '@/pages/Search'
      
      //路由配置
      export default new VueRouter({
       routes:[
          {
            path:'/home',
            component:Home
          },
          {
            path:'/search',
            component:Search
          },
          // 重定向  在项目跑起来的时候 立马访问首页
          {
            path:"*",
            redirect:'/home'
          }
        ]
      ​
      })

   4. 引入路由

      //引入vue-router 
      import VueRouter from 'vue-router'
      
      //引入路由器（自己创建的）完整路径是./router/index.js
      import router from './router'
      
      //使用
      Vue.use(VueRouter)
      
      //注册
      new Vue({
        render: h => h(App),
        router:router
      }).$mount('#app')

三、axios的使用

1. 安装

   npm install axios --save

四、vuex环境搭建

1. 工作原理

   Actions （动作）：一般写逻辑（判断等）和发送请求的代码，组件实例对象的method只需调用即可；Mutations（加工）；State（状态/数据）

2. 安装

   vue3 安装vuex4版本：npm i vuex 

   vue2 安装vuex3版本：npm i vuex@3

3. 创建文件：src/store/index.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件 必须在store被创建前应用，若只在main.js中应用会报错
   Vue.use(Vuex)
   
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state
   })
   

4. 创建vm时传入store配置项

     main.js中写入：

   ......
   //引入store
   import store from './store'
   ......
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	store
   })
   

5. 基本使用

      组件中读取vuex中的数据：