vue-cli

vue-cli是用運行nodejs運行的配合 webpack-cli 和各類 webpack-cli插件 配合完成的，帶有npm插件下載，sass編譯，less編譯，label編譯，熱加載熱更新技術，文件打包功能，請求代理等等功能

正式開始
第一步安裝nodeJS和npm，這個查看==nodejs筆記==的《安裝nodejs》

vue-cli分爲2.x和3.x【腳手架的版本跟vue不要緊，vue目前仍是2.x】
這裏只講3.x的，後面會補2.x

Vue-cli3.x

## 全局腳手架
npm install -g @vue/cli
## 查看版本
vue --version
## 新建項目
vue create 【name】

babel要，router要，vuex要，其餘不須要，也能夠都不要，後面本身再安裝也行

安裝完畢後
若是文件夾裏沒有==node_modules==這個子文件夾，這個是放須要的插件的，這是須要執行

npm install

從npm倉庫去下載插件，下載目錄是按文件夾裏的==package.json==文件下載的，這個文件很是的重要，打開文件能夠看到(2.0和3.0都同樣)

• scripts是腳本的意思，也就是執行命令，啓動服務，打包文件就是用這個腳本的命令
• dependencies是正式環境的依賴，會被最後打包的插件集合
• devDependencies是開發依賴，打包用不到，可是開發過程須要的插件集合

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": { ... }

npm的安裝插件，卸載插件，更新插件的命令須要能夠百度，==nodeJs筆記==裏也有

而後就能夠開始開發了，推薦的開發工具是==webStrom==，能夠去==工具==看看

而後引入整個項目後先研究下目錄

上面的目錄是咱們正常開發都須要的文件，除了plugins是我本身添加的外，應該都沒有==vue.config.js==這個文件，這個文件是==必備文件==，可是腳手架沒有自帶須要==本身配置==，百度有大把配置

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    /** 區分打包環境與開發環境
     * process.env.NODE_ENV==='production'  (打包環境)
     * process.env.NODE_ENV==='development' (開發環境)
     */
    // 基本路徑
    // vue2.0的本地配置和打包配置是分開的，3.0是合併的，因此要加上三元判斷
    publicPath: process.env.NODE_ENV === 'development' ? '/' : '/dist',
    // 輸出文件目錄
    outputDir: 'dist',
    assetsDir: '',
    lintOnSave: true,
    runtimeCompiler: true, //關鍵點在這
    // 調整內部的 webpack 配置。
    // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
    chainWebpack: config => {
        // config.resolve.alias
        //     .set('@', resolve('src'))
        //     .set('@style', resolve('src/assets/style'))
        //     .set('@img', resolve('src/assets/img'))
        //     .set('@components', resolve('src/components'))
    },
    configureWebpack: () => {},
    // 生產環境是否生成 sourceMap 文件
    productionSourceMap: true,
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 4000, // 打開項目的端口號
        https: false,
        hotOnly: false,
        proxy: {
            // 接口代理配置
        },
        before: app => {}
    }
}

// 若是想修改打包文件夾名字，修改兩處地方
// publicPath: process.env.NODE_ENV === 'development' ? '/' : '/xx',
// outputDir: 'xx',

而後把項目起起來，在目錄的cmd裏按照==package.json==裏的script裏的打開服務器，若是不知道怎麼啓動，能夠打開項目裏的==readme.md==這個文件，裏面有這麼一句Compiles and hot-reloads for development，意思是熱加載啓動開發環境，複製下面的命令，應該是這句，經過當前文件夾的cmd窗口輸入

npm run serve

啓動完畢後回車，等一會以後應該有提示網頁地址

打開後頁面長這樣就是開啓成功了

vue-cli跟直接引入vue-script代碼的寫法區別在哪

• vue-cli的代碼是寫在一個個的vue後綴文件裏的，經過webpack去編譯的
• vue-cli引入插件就不是用script，用的是==ES6模塊化==或者==NodeJS的require==寫法
• vue-cli的v-bind綁定文件路徑失效

// 能夠
<img src="../../assets/logo.png"/>

// 不行
<img :src="url"/>
data {
    url: '../../assets/logo.png'
}

// 得改爲這樣
<img :src="url"/>
import url from '../../assets/logo.png'
data {
    url,
}

vue-cli的做用是什麼
若是說腳手架能實現的功能我用html+srcipt插件也能同樣實現，我爲何要用vue-cli

• 腳手架讓文件擺放更加規範，從上面的文件夾解讀就能夠看出來，規範能讓維護簡單不少
• 經過webpack打包的代碼安全性更好，文件通過壓縮也更小
• 腳手架還方便調試，由於他自帶了代碼映射，錯誤提示，以及熱加載熱更新
• 腳手架使用路由router更方便，什麼是路由查看下一篇筆記