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地址
項目公網地址

1) vueSSR: 從0到1構建vueSSR項目 --- 初始化
2) vueSSR: 從0到1構建vueSSR項目 --- 路由的構建
3) vueSSR: 從0到1構建vueSSR項目 --- node以及vue-cli3的配置
4) vueSSR: 從0到1構建vueSSR項目 --- vuex的配置（數據預取）
5) vueSSR: 從0到1構建vueSSR項目 --- 開發環境的部署
6) vueSSR: 從0到1構建vueSSR項目 --- 僞熱更新