Vue CLI3開發環境搭建

安裝

關於舊版本

Vue CLI 的包名稱由 vue-cli 改爲了 @vue/cli。 若是你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你須要先經過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

---

Node 版本要求

Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。
使用如下命令安裝這個新的包

npm install -g @vue/cli

安裝以後，用這個命令來檢查其版本是否正確 (3.x)

vue --version

建立一個項目

vue create projectname

運行如下命令來建立一個新項目：

vue create hello-world

選擇默認(基本的 Babel + ESLint)配置，仍是手動配置，上下鍵控制
vue-cli3.0在你建立後會有一個保存當前配置的功能
由於以前建立過，提供保存配置的功能,這裏選最後一個手動配置

通常不要選擇eslint 檢驗你的代碼，不然你可能會遇到不少麻煩
通常採用 vue-router（路由必備）,vuex（全家桶的狀態管理器）,sass（css擴展語言）,babel(使項目可用es6)
（你的項目決定你用什麼）空格多選
TypeScript
PWA
Vue-router
Vuex
CSS預處理
eslint prettier
自動化測試單元測試 、e2e

使用圖形化界面配置項目

vue ui

項目目錄講解

dist 目錄爲 運行 npm run build 構建後的項目
main.js 爲入口文件
vue.config.js 爲項目配置文件

vue.config.js裏
大概包括了配置 經常使用的輸出路徑名、跟目錄、預處理、devServer配置、pwa、dll、第三方插件等等
詳細配置能夠看官方文檔 詳細config配置

自定義配置

1,全局變量的設置

在項目根目錄 建立二個文件

.env.development
.env.production

#.env.development
#鍵值對，必須以VUE_APP開頭
VUE_APP_development_URL = 'http://xxxx.xxx.xx.xx/mockjs/'

#.env.production
#鍵值對，必須以VUE_APP開頭
VUE_APP_production_URL = 'http://xxxx.xxx.xx.xx/production/'

//main.js中使用
const service = axios.create({
    baseURL: process.env.VUE_APP_development_URL 
})

2,代理配置webpack-dev-server

直接上代碼

//全部 webpack-dev-server 的選項都支持
    // https://webpack.docschina.org/configuration/dev-server/
    devServer: {
        open: true,

        host: 'localhost',

        port: 3000,

        https: false,

        hotOnly: true,

        proxy: {
            '/api': {
                // 目標 API 地址
                target: 'http://114.55.59.209:8080',//開發環境
                // target: 'http://192.168.6.163:8080/',//域名環境
                //若是要代理 websockets
                // ws: true,
                // 將主機標頭的原點更改成目標URL
                changeOrigin: true,
                pathRewrite:{
                    '^/api':'/' //這個很重要
                }
            }
        },

        before: app => {
        }
    },

在main.js 使用配置的 api

//Axios配置
Axios.defaults.baseURL = '/api/';

.vue文件中調用接口模版

this.$axios.post(//方法
'/User/GetRemainTag',//請求地址
{SkillCategoryId: this.$route.query.idskill})//參數
.then(result => {
      console.log(result);                     
})
.catch(err=>{
    console.log(err);
});

CSS 相關

Vue CLI 項目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在內的預處理器。

引用靜態資源

全部編譯後的 CSS 都會經過 css-loader 來解析其中的 url() 引用，並將這些引用做爲模塊請求來處理。這意味着你能夠根據本地的文件結構用相對路徑來引用靜態資源。另外要注意的是若是你想要引用一個 npm 依賴中的文件，或是想要用 webpack alias，則須要在路徑前加上 ~ 的前綴來避免歧義。更多細節請參考處理靜態資源。

附上項目的vue.config.js

module.exports = {
    baseUrl: '',
    outputDir: 'dist',
    //放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
    assetsDir: 'static',
    //默認狀況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。若是你沒法使用 Vue CLI 生成的 index HTML，你能夠經過將這個選項設爲 false 來關閉文件名哈希。
    filenameHashing: true,
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板來源
            template: 'public/index.html',
            // 在 dist/index.html 的輸出
            filename: 'index.html',
            // 當使用 title 選項時，
            // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在這個頁面中包含的塊，默認狀況下會包含
            // 提取出來的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
    },
    // eslint-loader 是否在保存的時候檢查
    lintOnSave: process.env.NODE_ENV !== 'production',
    // 是否使用包含運行時編譯器的Vue核心的構建
    runtimeCompiler: undefined,
    // 生產環境 sourceMap
    productionSourceMap: false,
    //該函數及能夠修改配置並不返回任何東西，也能夠返回一個被克隆或合併過的配置版本。
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 爲生產環境修改配置...
        } else {
            // 爲開發環境修改配置...
            /*            var webpack = require('webpack');
                        var webpackConfig = require('./node_modules/@vue/cli-service/lib/config/dev.js');
                        var compiler = webpack(webpackConfig);

                        require('webpack-dev-middleware-hard-disk')(compiler, {
                            publicPath: webpackConfig.output.publicPath,
                            quiet: true
                        })*/
        }
    },
    //會接收一個基於 webpack-chain 的 ChainableConfig 實例。容許對內部的 webpack 配置進行更細粒度的修改。
    chainWebpack: (config) => {
        // 鏈式配置
        // var webpackConfig = require('./node_modules/@vue/cli-service/lib/config/dev.js');
        // //配置插件：添加
        // config
        //     .plugin('webpack-dev-middleware-hard-disk')
        //     .use(require.resolve('webpack-dev-middleware-hard-disk'), {
        //         publicPath:webpackConfig,
        //         quiet: true
        //     });
    },
    // 配置高於chainWebpack中關於 css loader 的配置
    css: {
        sourceMap: true,
        loaderOptions: {
            css: {
                // 這裏的選項會傳遞給 css-loader
            },
            postcss: {
                // 這裏的選項會傳遞給 postcss-loader
            }
        }
    },
    //全部 webpack-dev-server 的選項都支持
    // https://webpack.docschina.org/configuration/dev-server/
    devServer: {
        open: true,

        host: 'localhost',

        port: 3000,

        https: false,

        hotOnly: true,

        // proxy: {
        //     '/api': {
        //         // 目標 API 地址
        //         target: 'http://114.55.59.209:8080',//開發環境
        //         // target: 'http://192.168.6.163:8080/',//域名環境
        //         //若是要代理 websockets
        //         // ws: true,
        //         // 將主機標頭的原點更改成目標URL
        //         changeOrigin: true,
        //         pathRewrite:{
        //             '^/api':'/' //這個很重要
        //         }
        //     }
        // },

        before: app => {
        }
    },
    // 構建時開啓多進程處理 babel 編譯
    parallel: require('os').cpus().length > 1,

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

    // 第三方插件配置
    pluginOptions: {
        foo: {
            // 插件能夠做爲 `options.pluginOptions.foo` 訪問這些選項。
        }
    }
};