Vue腳手架

用于快速生成 Vue 項目基礎(chǔ)架構(gòu)，官網(wǎng)。

通過npm安裝 vue-cli：
npm i -g @vue/cli

創(chuàng)建項目的方式：

• 基于 交互命令行 的方式創(chuàng)建新版 vue 項目：
  vue create my-project my-project 為項目名稱
• 基于 圖形化界面 的方式創(chuàng)建新版 vue 項目：
  vue ui

推薦使用第二種方式，以下為第二種方式的相關(guān)配置：
根目錄下新建 vue.config.js 文件：

module.exports = {
    devServer: {
        //自動打開瀏覽器
        open:true,
        port:8888
    }
}

運行 npm run serve 查看效果。

Element-UI 的基本使用

一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue2.0 的桌面端組件庫，官網(wǎng)。

1.基于命令行方式手動安裝

1.安裝依賴包 npm i element-ui -S

2.在 main.js 文件中導(dǎo)入 Element-UI 相關(guān)資源

//導(dǎo)入組件庫
import ElementUI from 'element-ui';

//導(dǎo)入組件相關(guān)樣式
import 'element-ui/lib/theme-chalk/index.css';

//配置 Vue 插件
Vue.use(ElementUI);

2.基于圖形化界面自動安裝

1.運行 vue ui命令，打開圖形化界面
2.通過 Vue項目管理器，進入集體的項目配置面板
3.點擊 插件 -> 添加插件，進入插件查詢面板
4.搜索 vue-cli-plugin-element 并安裝
5.配置插件，實現(xiàn)按需導(dǎo)入，從而減少打包后項目的體積

注意：
下載好插件后配置，右側(cè) fully import 應(yīng)改成 import on demand（按需導(dǎo)入）。