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

 

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

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

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

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

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

三、輸入一下命令建立一個項目：

vue create <project-name>

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

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

 

更改一些其它設置以後，便會開始安裝須要的依賴包

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

>cd <project-name>

>yarn serve
或 >npm run serve

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

五、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多的項目。

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

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

如圖：

七、使用 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 => { } } };