vuecli3的项目搭建&vite搭建vue3项目，包含vue.config.js常用配置

1、卸载旧版本

npm uninstall vue-cli -g 或者 yarn global remove vue-cli

2、安装cli3脚手架

npm install -g @vue/cli 或者 yarn global add @vue/cli

注意：

• 要求node版本 >=8.9
• vue查看版本号------vue -V
• node查看版本号-----node -v

3、安装支持运行独立的.vue文件

需安装 npm install -g @vue/cli-service-gloabal
运行文件 vue serve <文件名>

4、新建项目

vue create <项目名字> //不支持驼峰
也可使用图形化界面搭建 vue ui

5、安装插件

vue add <插件名>

6、cli常用配置（vue.config.js）

const path = require('path');
const resolve = (dir) => path.join(__dirname,dir);
module.exports = {
    publicPath: './', //打包路径，使用相对路径生成的dist文件夹下的index可以打开
    // 输出文件目录
    outputDir: 'dist',
    //取消生成map文件
    productionSourceMap: false,
    // webpack-dev-server 相关配置
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: null, // 设置代理
        before: app => { }
    },
    chainWebpack: config =>{
        //别名配置
        config.resolve.alias
            .set('common',resolve('src/common'))
            .set('utils', resolve('src/utils'))
    },
    // 第三方插件配置
    pluginOptions: {
        //（1） vue-cli3 使用less全局变量
        //需安装：vue add style-resources-loader
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                //引入路径，注意不能使用别名，可以写多个 
                resolve('./src/assets/css/variable.less')
            ]
        }
    }
}

7、使用 Vite 构建vue3.0项目(2020-09-19发布vue3.0)

Vite 是一个由原生 ES 模块驱动的 Web 开发构建工具，支持模块热更新和按需加载
用尤大的话来讲，用了 Vite 之后就可以告别 webpack 了

• 先用 Vite 创建一个项目

//1.x版本
npm init vite-app <project-name> 

//2.x版本
npm init @vitejs/app <project-name>

• 然后安装依赖，并启动项目

npm install
npm run dev

注意：Vite 需要 Node.js 版本 >= 12.0.0。