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项目 --- 伪热更新