Vue--項目初始化

環境准備

在前面我們學了很多vue相關的知識，學的比較獨立，現在來開發一個簡單的系統，使用vue全家桶和elementUI把之前學的東西都串起來。

我們基於Vue-CLI腳手架創建項目，需要安裝Node.js8.9+

安裝Vue-CLI

npm install -g @vue/cli

安裝成功后，在命令行可以使用  vue 命令, 比如 查看版本

# 大寫V
vue -V

如果執行上面后，命令行提示 'vue' 不是內部或外部命令

解決方法：配置環境變量

1. 查看全局安裝目錄 nmp root -g

2.在 我的電腦 進入全局安裝目錄下，找到 vue.cmd

3. 右鍵計算機，屬性—》高級系統設置—》環境變量，將 vue.cmd 的路徑加入環境變量，點擊“確定”

Vue CLI 創建項目

項目名為zz-mms

 選擇自定義安裝，在Vue-CLI學習的時候，說過每個選項的含義，這里就不在說明

 

 等待項目安裝完成，啟動項目測試

cd zz-mms
npm run serve

看到如下頁面則成功

更改標題和圖標

項目啟動了，但是我們的標題是我們的項目名和圖標是vue的官方圖標，如下。

 打開項目的public文件夾，里面的index.html文件，將title標簽里的內容改為“鄒鄒管理系統”，網上找個icon，把favicon.ico替換，刷新網頁，如下

初始化項目

默認的端口是8080，我們也可以更改端口，格式檢查也是一件很麻煩的事情，我們要關閉，這些都可以在vue.config.js里面進行配置。

在zz-mms根目錄下創建一個vue.config.js文件，寫入如下配置

module.exports = {
    devServer: {
        port: 8888, // 端口號，如果端口被占用，會自動加1
        host: "localhost",  // 主機名，127.0.0.1  真機 0.0.0.0
        https: false,  // 協議
        open: true,  // 啟動服務時自動打開瀏覽器訪問

    },
    lintOnSave: false,  // 關閉格式檢查
    productionSourceMap: false // 打包時不會生成.map文件，加快打包速度
}

安裝axios，處理異步請求，在項目根目錄下進行安裝

npm i -S axios

安裝  pubsub-js ，實現非父子組件間通信

npm i -S pubsub-js

安裝完之后查看 package.json 中是否有對應依賴

安裝element-ui 

Element 是餓了么平台推出的一套基於 Vue.js 開發的后台頁面組件庫。可以幫助我們快速的搭建一個基於elementui的網站

官網：https://element.eleme.cn/

可以通過cdn引用，不推薦

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。

將  element-ui 模塊通過本地安裝為生產依賴。在  zz-ssm 目錄下的命令行窗口，輸入以下命令：

npm i element-ui -S

安裝完之后再package.json文件查看是否安裝成功。

引用element-ui

上面我們已經安裝好了element-ui，現在來整合到我們的項目zz-mms中

在 zz-ssm\src\main.js 中導入 element-ui 和 element-ui/lib/theme-chalk/index.css ，

使用 Vue.use(ElementUI)

在 zz-ssm\src\main.js按下面內容修改

import Vue from "vue";
import ElementUI from 'element-ui' // 引用element-ui組件庫
import 'element-ui/lib/theme-chalk/index.css'; // 引用樣式
import App from "./App.vue";
import router from "./router";

// 使用element-ui
Vue.use(ElementUI);

// 環境配置，是否為生成環境
// false為開發環境，Vue會提供很多警告，方便調試代碼
// true為生成環境，Vue會提供很少的警告
Vue.config.productionTip = process.env.NODE_ENV === 'production'

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

啟動看是否配置成功，在zz-mms下執行下面命令，啟動項目

npm run serve

沒有報錯，自動打開了網頁則項目配置成功

如果你是在 VS Code 寫代碼，建議安裝  Element UI Snippets 插件，有 element 語法提示，還有其他的插件也可以安裝，方便我們寫代碼