利用vue-cli 项目创建

72 阅读 0 评论 48 点赞

我是靠谱客的博主无心故事，最近开发中收集的这篇文章主要介绍利用vue-cli 项目创建，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在终端中输入命令 vue create 项目名称用以创建项目，在命令输入前会有命名提示符，提示当前所在目录是哪里。输入命令之后，等待片刻，会出现选择vue版本，选择vue2项目。
配置路由，需要下载依赖库(要通过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')

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