vueSSR: 從0到1構建vueSSR項目 --- 初始化

開始

初始化

    npm install -g @vue/cli nodemon
        nodemon  檢測目錄文件更改時，來重啓基於node開發的程序
    vue create vuessr
        我選的附帶 babel,eslint
    cd vuessr
    創建文件以及文件夾
    type null > vue.config.js

    //node相關配置文件
    mkdir nodeScript
    cd nodeScript
    type null > index.js
    type null > proxy.js
    type null > server.js
    進入src目錄
    //目錄初始化
    cd ../src
    type null > router.config.js //路由配置
    mkdir pages         //項目展示頁面主要目錄
    cd pages
    mkdir router
    mkdir entry         //vue-cli3 entry的相關配置入口 vueSSR需要。
    mkdir static/js     //gulp提取框架,插件等幾年不動的源碼整合後存放於cdn服務器
    mkdir static/css    //gulp提取整合初始化的樣式表，存放的位置
    mkdie methods       //vue等全局代碼的存放比如攔截器 use mixin 兼容函數
    //安裝依賴
    npm install --save-dev
        sass-loader
        npm-run-all npm運行多個命令 -s 是順序 -p是並行
        cross-env   可以修改node環境變量
        webpack-node-externals  忽略node_modules文件夾中的所有模塊
        vue-server-renderer 不解釋

修改eslint配置

package.json
    eslintConfig
        rules 這個對象下面添加，cli的eslint附帶以下的配置 所以手動關閉下。
            "no-console": 0,
            "no-unused-vars": 0,
            "no-undef": 0


如果你覺得eslint警告很煩，那麼可以
    vue.config.js
        module.exports = {
            ...,
            lintOnSave:false,
            ...
        }

明天開始配置 vue-router vuex entry 相關

github歡迎watch