vue-cli3用圖形化的方式創建項目

 

Vue腳手架可以快速生成Vue項目基礎的架構。
A.安裝3.x版本的Vue腳手架：
    npm install -g @vue/cli
B.基於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

C.分析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:

 

 

說幾個重要的點。

 

預設要選擇  手動配置

 

功能 要選 第一個babel  router vuex  Linter/Formatter  和最后一項 使用配置文件。

 

配置 要選 第三個，EsLint+Standard config  標准版

 

Vue腳手架的自定義配置

運行 npm run server  的時候項目的端口號和幫你自動打開網頁。

A.通過 package.json 進行配置 [不推薦使用]
    "vue":{
        "devServer":{
            "port":"9990",
            "open":true
        }
    }
B.通過單獨的配置文件進行配置，創建vue.config.js
    module.exports = {
        devServer:{
            port:8888,
            open:true
        }
    }

 

 

Element-UI的基本使用

第一步安裝依賴，第二步在main中引入相關的文件

A.安裝：
    npm install element-ui -S
B.導入使用：
    import ElementUI from "element-ui";
    import "element-ui/lib/theme-chalk/index.css";

    Vue.use(ElementUI)

 

 用圖形化來添加element-ui依賴 推薦

先按照上面寫的創建一個項目，然后點擊插件 - 添加插件 - 搜 vue-cli-plugin-element 並安裝。 選擇按需導入吧。  ok