基于圖形化界面創(chuàng)建項目步驟

1 執(zhí)行命令：

#進入cmd
執(zhí)行：vue ui

2 創(chuàng)建項目

image.png

3 選擇目錄

image.png

image.png

5 配置選擇

image.png

image.png

• Linter/Formatter
• 用ESLINT或Prettier檢查和加強代碼質(zhì)量
• 其實就是： 代碼風(fēng)格、格式校驗
• 注意：這個linter/Formatter 不要選擇，選擇之后對代碼風(fēng)格要求過于嚴(yán)格，寫代碼太費勁

7 配置項

image.png

lint 在保存時校驗格式

8 保存配置信息

image.png

9 創(chuàng)建成功（看到項目管理界面）

image.png

image.png

11 任務(wù)

image.png

• 其他的功能，大家可以自己點擊看看
• 可以在插件功能中管理插件
• 可以在配置功能中進行配置

12 查看項目首頁（點擊上圖中的：啟動app，按鈕進入）

image.png

13 說明：vue-cli腳手架是整合了webpack打包工具

package.json中默認(rèn)有啟動項目的命令
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
 之前的使用了webpack的項目的啟動命令
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",
    "build": "webpack -p"
  },

分析項目結(jié)構(gòu)

目錄結(jié)構(gòu)

image.png

真實目錄

image.png

• assets和public都是存放靜態(tài)文件，習(xí)慣在assets中存放字體圖標(biāo)和圖片
• component：組件
• views：視圖代碼
• App.vue：根組件
• main.js：打包入口文件
• router.js：路由文件
• eslintrc.js：eslint配置文件
• .gitignore：git忽略文件
• babel.config.js：babel配置文件
• package.json：包管理配置文件
• postcss.config.js：postcss配置文件

問題：大家在新建項目之后，會發(fā)現(xiàn)沒有router.js文件，而是有一個router文件夾，下邊有一個index.js。這是因為vue和vue-router的版本不一致的原因

對vue腳手架項目進行自定義配置的兩種方式

• 腳手架幫助我們做了很多配置
• 程序員有時候需要自定義配置
• 自定義配置兩種方式

1. 通過package.json配置項目（port端口，open打包完成之后自動打開瀏覽器）（不推薦方式）

   
   
   image.png

2 單獨配置文件配置項目（推薦方式）（意思就是要將自定義的配置要單獨存放）

image.png

介紹element-ui并基于命令行方式手動安裝

介紹

Element-UI：一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue 2.0的桌面端組件庫
官網(wǎng)：https://element.eleme.cn/#/zh-CN

Element-UI提供了豐富的組件，設(shè)計非常美觀，我們可以直接拿來用，這樣可以省去很多樣式編寫時間，讓我們更加專注邏輯代碼

image.png

• 將導(dǎo)入的ElementUI安裝到Vue中，這樣Vue才可以使用Element-UI
• 上述代碼，寫到打包入口文件：main.js

#main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 手動配置 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

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

#App.vue
<template>
  <div id="app">
    <!--增加如下代碼，從Element-UI隨便copy一些點代碼（組件-Button中找如下代碼）-->
    <el-row>
      <el-button>默認(rèn)按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>
    
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

效果：

image.png

基于圖形化界面自動安裝element-ui

image.png

打開圖形化界面之后，創(chuàng)建項目，然后選擇之前的配置模板

image.png

進入插件---添加插件，然后搜索，進行安裝

image.png

image.png

• import on demand：按需導(dǎo)入

• demand：要求
  文件改動（直接點擊繼續(xù)）

  
  
  image.png
  
  

  安裝成功

  
  
  image.png
  
  通過vscode打開項目
  
  image.png

main.js中導(dǎo)入了element.js（自動生成代碼）

import './plugins/element.js'

element.js中導(dǎo)入了Element-UI（自動生成代碼）

import Vue from 'vue'
import { Button,Row } from 'element-ui'

Vue.use(Button)
Vue.use(Row)

App.vue中添加Element-UI代碼（自己添加）

<template>
  <div id="app">
    <!--添加如下代碼-->
    <el-row>
      <el-button>默認(rèn)按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>
   ....