vue-cli3通過命令行搭建基本項目框架

vue-cli3基本項目框架搭建

目錄

首先安裝vue-cli3環境

創建vue-cli3基本項目結構

vue-cli3中基本的文件結構

配置項的修改

---

vue-cli3出來也有一段時間了，但是很多老項目還是用的vue-cli2的結構，最近想折騰一下自己搭一個vue-cli3的前端項目基礎框架，也是記錄一下吧。

首先安裝vue-cli3環境

---

npm install -g @vue/cli

  安裝成功後使用：

vue --version

命令來檢查所安裝的對應版本

創建vue-cli3基本項目結構

---

使用cd命令，到對應的項目文件夾下面，或者在文件夾下，按住shift+鼠標右鍵，選擇在此處打開PowerShell窗口，或者在此處打開命令行窗口。

運行以下命令來創建一個新項目：

vue create hello-world

其中：hello-world是項目名稱，項目名稱不能包含大寫字母。

我們選擇第二個，因爲一般項目中都會用到vue-router以及vuex,以及其他的一些自定義配置；

使用babel,router,vuex,css預編譯，格式化校驗。

輸入y，回車，使用history模式，也可以根據具體的需要，選擇。

這裏我們使用node-sass來編譯scss/sass，也可以根據具體情況選擇

ESLint配置，選擇默認選項

這些插件的配置方式，我用的是默認的配置文件。

以後是否使用這個配置，根據實際情況來選擇，我們先選擇n。

然後等待模板下載，文件生成。

到這裏基本的文件模板就已經生成完成。

vue-cli3中基本的文件結構

---

他的整個文件結構，基本上跟vue-cli2還是保持一致的，但是少了一個config文件夾，對於我們開發的時候來說，就關心幾個點，router,propxyTable,以及package.json。

首先是package.json:

首先一個，最大的區別就是我們的啓動命令，從以前的npm run dev ，變成了npm run serve。

還有就是vue-cli3獨有的vue-cli插件，詳細介紹參考vue-cli文檔：https://cli.vuejs.org/zh/dev-guide/plugin-dev.html

@vue/cli- xxx 開頭的就是vue-cli的插件。

配置項的修改

---

既然可以啓動服務了，那麼我們啓動服務的端口，訪問API的後臺代理在哪裏配置？

vue-cli3的配置詳情可以參考vue-cli文檔：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

這裏我們在package.json同級目錄下新建文件：vue.config.js

module.exports = {
    devServer: {
        port: 8088, // 端口號
        host: "localhost",
        https: false, // https:{type:Boolean}
        open: false, //配置自動啓動瀏覽器
        // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
        proxy: {
            "/api": {
                target: "<url>",
                ws: true,
                changeOrigin: true
            },
            "/foo": {
                target: "<other_url>"
            }
        } // 配置多個代理
    },
    lintOnSave: false // 關閉eslint代碼檢查
};

粘貼代碼，並根據需要改變配置選項。

---

至此，基本的vue-cli項目已創建完畢，下一篇文章會講關於第三方插件庫的引用，vuex和vue-router的結構化調整，優化，axios的引入和封裝。

轉載地址：
https://blog.csdn.net/ttuuyyu/article/details/95621617