vue-cli3+webpack搭建vue单页项目

先安装好node.js，可以网上查看安装方法

全局安装vue-cli3

npm i -g @vue/cli
#安装后可以通过以下命令查看是否安装成功,显示版本后即安装成功
vue --version

全局安装webpack和webpack-cli

npm i -g webpack
#安装成功后可以通过以后命令查看是否安装成功，显示版本号即安装成功
webpack -v

环境搭建完成，自己可以选择一个目录创建项目，通过命令创建

vue create app(项目名称)
#再通过以下命令安装依赖包
npm i

完成后vue-cli3目录结构如下图

配置文件需要自己创建一个，在根目录下创建一个vue.config.js文件，2个基础配置如下

module.exports = {
    baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
    devServer: {
        port: 8383, // 端口号
        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>'
            }
        },  // 配置多个代理
    }
}

项目已经可以运行，运行命令

npm run serve

项目运行后再浏览器地址栏输入localhost:8383即可访问项目，vue-cli3支持热更新，在编辑器中修改后浏览器也会发生相应变化，大大提高了编程效率

如果想去掉url地址栏中的“#”我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。只需要在路由表中，加入一行代码即可

以上就完成了vue-cli3+webpack搭建项目