利用vue-cli 项目创建

1. 在终端中输入命令 vue create 项目名称用以创建项目，在命令输入前会有命名提示符，提示当前所在目录是哪里。输入命令之后，等待片刻，会出现选择vue版本，选择vue2项目。

2. 配置路由，需要下载依赖库(要通过cd命令 进入到项目根目录)，使用命令

   npm install --save --force vue-router@3.5.1 // 安装指定版本3.5.1的vue-router

   PS：如果有拉取依赖，在项目的根目录下点击查看package.json文件，在该文件中就包含了我们带入的依赖库

   拉取依赖后，在src目录下创建router目录，在其中创建index.js文件用以配置路由。

   import Vue from "vue";
   import VueRouter from "vue-router";
   ​
   // 导入需要配置的路由组件
   ​
   ​
   Vue.use(VueRouter)
   ​
   // 创建常量 配置路由和组件的映射
   const routes = [
      // {path:'url',component:组件} 
   ]
   ​
   // 建立router对象
   export default new VueRouter({
       mode:'history',
       routes
   })
   ​

   在main.js文件中，导入路由

   import Vue from 'vue'
   import App from './App.vue'
   ​
   import router from './router/index.js' // 导入路由配置文件
   ​
   Vue.config.productionTip = false
   ​
   new Vue({
     router:router, // 将路由加入vue实例中
     render: h => h(App),
   }).$mount('#app')
   ​

3. 配置ajax和代理服务器

   首先通过npm拉取axios依赖库，通过命令npm install --save --force axios。

   拉取后，首先去vue.config.js文件中添加配置

   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
     transpileDependencies: true,
     lintOnSave:false,
     devServer:{
       port:9000,
       proxy:{
         // 以/api开头的请求，通过代理访问http://localhost:8080
         "/api":{
           target:"http://localhost:8080",
           pathRewrite:{
             "^/api":"/"
           }
         }
       }
     }
   })
   ​

   在src目录下，创建servcie目录，在其中导入ajax.js文件(自己封装的文件)。

   在main.js文件中，导入并配置ajax。

   import Vue from 'vue'
   import App from './App.vue'
   ​
   import router from './router/index.js' // 导入路由配置文件
   // 导入ajax文件
   import ajax from './service/ajax.js'
   ​
   Vue.config.productionTip = false
   Vue.prototype.ajax = ajax
   ​
   new Vue({
     router:router, // 将路由加入vue实例中
     render: h => h(App),
   }).$mount('#app')
   ​

4. Vuex安装配置

   利用npm下载依赖包 npm install --save --force vuex@3.6.2 element-ui

   在src目录下，新建store目录，并在其中新建index.js文件，在其中建立store对象，创建store对象时，需要加入一个可选的选项对象，有如下的可选选项：state--保存数据的对象； getters--对数据进行处理的逻辑方法 ；mutations--改变state的方法；actions--异步方法； module--指定store的子模块

   import Vue from "vue";
   import Vuex from 'vuex'
   ​
   Vue.use(Vuex)
   ​
   // 创建store对象
   export default new Vuex.Store({
       state:{//共享数据
           num:0,
           userId:10
       },
       mutations:{// 更改state的方法
           addNum(state){
               state.num++;
           }
       },
       getters:{
   ​
       },
       actions:{
   ​
       }
   });

   然后，在main.js中导入注册store

   import Vue from 'vue'
   import App from './App.vue'
   ​
   import router from './router/index.js' // 导入路由配置文件
   // 导入ajax文件
   import ajax from './service/ajax.js'
   import store from './store/index.js'
   ​
   ​
   Vue.config.productionTip = false
   Vue.prototype.ajax = ajax
   ​
   new Vue({
     store:store,  // 将store 加入到vue实例中
     router:router, // 将路由加入vue实例中
     render: h => h(App),
   }).$mount('#app')

   在哪一个组件，需要使用到store中的内容，在组件中导入并注入store即可。

   <script>
   // 导入store 
   import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
   ​
   export default {
       // 注入到组件中 mapState 放入计算属性中
       computed:{
           ...mapState(['num','userId'])
       },
       methods:{
           ...mapMutations(['addNum']),
           add(){
               this.addNum();
           }
       }
   }
   </script>

   5.element-ui

   利用npm下载依赖包 npm install --save --force element-ui

   在mian.js中，去配置element-ui

   import Vue from 'vue'
   import App from './App.vue'
   ​
   import router from './router/index.js' // 导入路由配置文件
   // 导入ajax文件
   import ajax from './service/ajax.js'
   import store from './store/index.js'
   ​
   // element-ui 库 和element-ui的样式
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   ​
   Vue.use(ElementUI)
   Vue.config.productionTip = false
   Vue.prototype.ajax = ajax
   ​
   new Vue({
     store:store,  // 将store 加入到vue实例中
     router:router, // 将路由加入vue实例中
     render: h => h(App),
   }).$mount('#app')