使用vscode或hbuilderx等ide打开创建好的项目:
结构如下
在这里插入图片描述
在src中:
app.vue 是所有组件的跟组件
main.js 是项目的打包入口文件
router.js 是路由配置文件

上面都是废话,了解一下就行,接下来开始自定义配置。

一.启动项目时采用指定端口,并自动打开浏览器
1.在项目根目录创建文件vue.config.js
2.写入如下代码:

module.exports = {
  devServer: {
    // 自动打开浏览器
    open: true,
    port: 8888
  }

}

3.命令行启动:

npm run serve

这样就会在8888端口启动项目并自动在浏览器打开。

二.配置elementUI库
1.安装插件,打开图形界面工具,搜索插件 vue-cli-plugin-element 并安装,配置插件为按需导入,然后点击完成安装
在这里插入图片描述

2.导入资源,进入项目的main.js,增加如下代码:

// UI库
import './plugins/element.js'

导入完毕

三.配置axios依赖
1.安装依赖,打开图形界面工具,在“运行依赖”中搜索 axios 并安装
安装完毕

四.托管到码云或github
1.首次托管时进行全局配置

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

2.找到你的项目跟目录,打开命令行,输入如下命令

git status
git add .
git commit -m "add files"
git status
git remote add origin 你的仓库地址
git push -u origin master

这样就把你的项目托管到云端了

五.删除项目多余的部分
1.清空app.vue中的基本代码,保留如下结构

<template>
  <div id="app">
    app.vue组件
  </div>
</template>

<script>

export default {
  name: 'app'
}
</script>

<style>
</style>

2.删除router目录下的index.js中的基本路由,保留如下结构

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes
})

export default router

3.删除views目录
4.删除components目录下的HelloWorld.vue
清理完毕,项目干净了

接下来就可以正式开发项目了

Logo

前往低代码交流专区

更多推荐