vue-cli快速搭建Vue腳手架 （vue-cli 3.x 模板）

 

1、確保已經安裝了npm 或者 yarn

　　查看是否安裝了npm或yarn：在控制台輸入npm -v 或 yarn -v 能看到版本號就代表已經安裝

　　（注意：Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)）

2、全局安裝vue腳手架工具 vue-cli

yarn global add @vue/cli
# OR
npm install -g @vue/cli

3、輸入一下命令創建一個項目：

vue create <project-name>

輸入命令后會詢問選取一個 preset：

默認的包含了基本的 Babel + ESLint 設置的 preset，這里選擇了默認的，但一般生產中不選擇默認的。

 

更改一些其它設置之后，便會開始安裝需要的依賴包

4、進入到 <project-name> 目錄下，運行

>cd <project-name>

>yarn serve
或
>npm run serve

運行成功，即可在瀏覽器中輸入 http://localhost:8080/ 查看

5、vue項目目錄說明：

├ ── node_module/               #項目中安裝的依賴模塊
├ ── public/        #index.html 入口模板文件和favicon.icon
├  ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue組件
│   ├── components/             # 組件
│   │   └── ...
│   └── assets/                 # 資源文件夾，一般放一些靜態資源文件
│       └── ...
├── .babel.config.js                    # babel 配置文件
├── .gitignore                  # 用來過濾一些版本控制的文件，比如node_modules文件夾 
└── package.json                # 項目文件，記載着一些命令和依賴還有簡要的項目描述信息 
└── README.md                   #介紹自己這個項目的，可參照github上star多的項目。

 6、CLI圖形化界面搭建腳手架

//輸入以下命令，會在瀏覽器中運行一個圖形化的 腳手架 搭建向導，按照向導來便可快速簡單的搭建需要的腳手架
vue ui

如圖：

7、使用 vue.config.js 添加自定義配置

使用vue-cli 3.X 搭建的項目與vue-cli 2.x 搭建的項目相比，一些配置被隱藏了起來（其實是添加到了node_modules中），如果想添加一些自己的配置，需要在項目的根目錄下新建一個 veu.config.js 文件，然后按照vue-cli 3.x 給出的配置參考添加自己的配置即可(詳情參見https://cli.vuejs.org/zh/config/ ）

這里貼出我自己添加的一些簡單配置:

//#region 定義chainWebpack中別名所需的resolve()
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}
//#endregion

//vue.config.js
module.exports = {
    // 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。
    productionSourceMap: false,

    // webpack 配置，鍵值對象時會合並配置，為方法時會改寫配置
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            //生產環境位置...
        } else {
            //開發環境配置...
        }
    },

    // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},

    // 第三方插件配置
    pluginOptions: {},

    //Vue CLI 內部的 webpack 配置是通過 webpack-chain 維護的
    chainWebpack: (config) => {
        //為 import 的引用路徑添加別名
        config.resolve.alias
            .set('@', resolve('src'))
    },

    // Server配置
    devServer: {
        port: 3000,
        proxy: null,
        before: app => {
        }
    }
};