使用vue腳手架和element-ui使用

Vue腳手架

Vue腳手架可以快速生成Vue項目基礎的架構。

1. 安裝3.x版本的Vue腳手架： npm install -g @vue/cli

基於3.x版本的腳手架創建Vue項目：

1. 使用命令創建Vue項目：vue create my-project

• 選擇Manually select features(選擇特性以創建項目)
• 勾選特性可以用空格進行勾選。
• 是否選用歷史模式的路由：n
• ESLint選擇：ESLint + Standard config
• 何時進行ESLint語法校驗：Lint on save
• babel，postcss等配置文件如何放置：In dedicated config files(單獨使用文件進行配置)
• 是否保存爲模板：n
• 使用哪個工具安裝包：npm

2. 基於ui界面創建Vue項目
   命令：vue ui
   在自動打開的創建項目網頁中配置項目信息。
3. 基於2.x的舊模板，創建Vue項目
   npm install -g @vue/cli-init
   vue init webpack my-project

分析Vue腳手架生成的項目結構

node_modules:依賴包目錄
public：靜態資源目錄
src：源碼目錄
src/assets:資源目錄
src/components：組件目錄
src/views:視圖組件目錄
src/App.vue:根組件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:

• new一個Vue的實例對象
• 把router掛載上去
• 通過render函數把根組件渲染到首頁上去
• 通過$mount方法把Vue實例掛載到app所在區域

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

Vue腳手架的自定義配置

• 不推薦在package.json裏配置
• 通過單獨的文件中配置文件進行配置，創建vue.config.js文件

    A.通過 package.json 進行配置 [不推薦使用],打包成功時，自動打開瀏覽器
        "vue":{
            "devServer":{
                "port":"9990",
                "open":true
            }
        }
    B.通過單獨的配置文件進行配置，創建vue.config.js
        module.exports = {
            devServer:{
                port:8888,
                open:true
            }
        }

Element-UI的基本使用

• Element-UI:一套基於2.0的桌面端組件庫
• 官網地址：http://element-cn.eleme.io/#/zh-CN

導入使用：

1. 安裝：npm install element-ui -S

2. main.js導入組件庫：import ElementUI from "element-ui";

3. main.js中導入樣式import "element-ui/lib/theme-chalk/index.css"

4. main.js中使用Vue.use(ElementUI)

5. 在App.vue中複製html代碼。

可視版安裝

1. 添加插件：搜索vue-cli-plugin-element
2. import on demand 按需導入
3. zh-CN
4. element.js註冊了button，這樣每個都能使用button按鈕了