Vue项目创建

最新推荐文章于 2023-05-05 08:28:56 发布

小靳大人

最新推荐文章于 2023-05-05 08:28:56 发布

阅读量335

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/as15282235592/article/details/127118996

版权

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文件(自己封装的文件)。

import axios from 'axios';
import qs from 'qs'; // 将对象转化为 a=1&b=2格式字符串
const headers = {
    'Content-Type': 'application/x-www-form-urlencoded'
}
export default {
    async getSubmit (serverURL,paramObj){
    let response = await axios({
        method:"get",  // 请求方式
        url:serverURL,  // 请求URL
        params:paramObj  // 请求参数
    })
    return response.data;  // 返回响应消息体内容    
},
   async postSubmit(serverURL,paramObj)  {
    let response = await axios({
      
        method:"post",
        url:serverURL,
        data:paramObj
    })
    return response.data;
},
    async uploadSubmit (submitURL,param) {
        let formData = new FormData();

        for(var fieldName in param){
            formData.append(fieldName, param[fieldName]);
        }
        let config = {
            headers: {
            'Content-Type': 'multipart/form-data'
            }
        }
        var response = await axios.post(submitURL, formData, config);
        return response.data;
  
    }
}

在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')