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

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

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

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

  3. 拉取依赖后,在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')
    

    配置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')

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐