Vue入门（三）—— vue项目初始化配置

使用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
清理完毕，项目干净了

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