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
清理完畢，項目乾淨了

接下來就可以正式開發項目了