Vue(一) vue-cli4.x快速搭建項目


一:基礎環境配置

  (1)首先要下載node( https://nodejs.org/zh-cn/download/ );

  (2)打開終端輸入:

    node --version
    npm --version

 

  (3)若能顯示出版本號就說明已經安裝ok;

       

  

  (4)安裝腳手架(vue-cli)

    npm install @vue/cli -g //全局安裝最新的腳手架

 

二:搭建項目

  (1)生成項目目錄

    vue create 項目名稱(貌似不能含有大寫字母);

   

  (2)選擇手動配置還是默認配置

      default  默認配置

      Manually select features  手動配置

  

  (3)這里我們選擇手動配置,下面是我所選擇的

    

  

  (4)這里呢是讓我們檢查一下我們剛選的配置,然后問我們要不要使用history mode,其實呢就是我們的頁面路由含不含有#;這里我們選擇Y

    

  

  (5)選擇CSS預編譯器,這里我們選擇Less,其實都差不多選哪個都行,選你會用的,實在不行也可以直接用原生懟;

    

  

  (6)選擇 ESLint 代碼校驗規則,提供一個插件化的javascript代碼檢測工具,這里我們選擇ESLint + Prettier;

    

   

  (7)選擇什么時候進行代碼校驗,Lint on save 保存就檢查,Lint and fix on commit   fix 或者 commit 的時候檢查,這里我們選擇第一個,穩;

    

  

  (8)這里呢就是選擇把我們的配置保存到哪個文件中了,In dedicated config files 存放到獨立文件中,In package.json 存放到 package.json 中,這里我們選擇放到package.json中;

    

  

  (9)這里呢就是問我們要不要把我們的配置保存下來,為之后的項目。這里我們就選擇不了,每次都手動配置一下也不花時間;

    

  

  (10)到這里傻瓜式搭建項目就結束了,通過8080端口就可以訪問了;有時間還是建議去看看vue-cli腳手架的源碼,研究一下實現原理;

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM