-
在终端中输入命令 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')
利用vue-cli 项目创建
最新推荐文章于 2024-06-18 18:37:32 发布