vue3.0&&vue2.0项目安装以及初始化

1
2
3
4
5
6

//安装
npm install -g @vue/cli

//安装vue2.0(兼容)
npm install -g @vue/cli-init

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

//安装
vue creat projectName
//选择自我配置或者默认配置
//选择依赖项
//选择css预处理
//选择自动化代码格式化检测
//选择是否保存配置
//文件保存在哪（1）单独的文件配置 （2）packageJSON
//是否保存为未来预配置

npm run server //启动项目

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// conf 配置 (基础 + 常用)

module.exports = {
    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
    // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
    // outputDir: 'dist',
    // pages:{ type:Object,Default:undfind } 
    devServer: {
        port: 8888, // 端口号
        host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        },  // 配置多个代理
    }
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112

//多页应用配置

const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir)
}
const PrerenderSpaPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSpaPlugin.PuppeteerRenderer;
module.exports = {
    baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
    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']
        },
        test: {
            // 模板来源
            template: './src/mod1/test.html',
            // page 的入口
            entry: './src/mod1/test.js',
            // 在 dist/index.html 的输出
            filename: 'testDome.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'test Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'test']
        }
    },
    devServer: {
        overlay: {
            warnings: false,
            errors: false
        },
        lintOnSave: false
    },
    chainWebpack: (config) => {
        config.resolve.alias
            .set('BaseComponents', resolve('../public/components/BaseComponents'))
            .set('BusinessComponents', resolve('../public/components/BusinessComponents'))
    },
    // configureWebpack: config => {
    //     if (process.env.NODE_ENV !== 'production') return;

    //     return {
    //         plugins: [

    //             // 在vue-cli生成的文件的基础上，只有下面这个才是我们要配置的
    //             new PrerenderSPAPlugin({
    //                 // 生成文件的路径，也可以与webpakc打包的一致。
    //                 // 下面这句话非常重要！！！
    //                 // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
    //                 staticDir: path.join(__dirname, '../dist'),

    //                 // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
    //                 routes: ['/', '/about'],

    //                 // 这个很重要，如果没有配置这段，也不会进行预编译
    //                 renderer: new Renderer({
    //                     inject: {
    //                         foo: 'bar'
    //                     },
    //                     headless: false,
    //                     // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
    //                     renderAfterDocumentEvent: 'render-event'
    //                 })
    //             })
    //         ]
    //     };
    // },
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                modules: true
            }
        }
    },
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
            '/api': {
                target: 'http://app2.jg.eastmoney.com/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }, // 设置代理
        before: app => {}
    }

}