安装vue-cli 3.0 方式

npm install -g @vue/cli

vue-cli 3.0创建工程的方式和2.0不一样

create 代表可以创建一个新的项目 vue create vue3-demo

add 在已创建的项目中添加新的插件

invoke 在已创建的项目调用插件

inspect 检查webpack的配置

serve 开发环境 npm run dev(2.0)

bulid 打包成生产环境

ui 打开 vue-cli 的 ui

init 生成一个项目

查看帮助

vue --help

查看具体命令的帮助

vue create --help

vue-cli 3创建流程

1.vue create vue3-demo

默认带babel(es6转换为es5的插件)，eslint

手动选择要安装的功能，绿色代表选中,空格选中，a代表全选，i代表反选

使用 package.json保存配置

是否将此配置保存为以后项目的预设，选择n

创建完成

使用npm run serve运行开发环境

vue-cli3.0添加插件

在2.0中，在终端使用npm install axios这种方式添加插件

3.0中使用add方法， vue add vuetify（vue-cli-plugin-vuetify）安装vue的ui库

vue-cli3.0中使用环境变量

在项目的根目录下创建.env文件，定义VUE_APP_+后缀，比如VUE_APP_URL=https://api.com

修改.env文件之后需要重启环境

.env.development 开发环境

.env.production 生产环境

环境变量名称必须以VUE_APP_开头，如果不是，假设在.env.development中不是，则会自动使用.env文件中的环境变量

vue-cli3.0中独立运行.vue文件

在项目的根目录中创建一个.vue文件 hello.vue

在终端中使用vue serve Hello.vue

提示需要安装一个service插件，安装之后，再次使用vue serve Hello.vue

vue-cli3.0中图形页面构建项目GUI

在任意目录使用 vue ui

vue-cli 3.0 配置基础的路径

在项目的根目录下创建 vue.config.js 必须是这个名字

module.exports = {
    baseUrl: '/', // 根路径
    outputDir: 'dist', // 构建输出目录 npm run build
    assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
    lintOnSave: false, // 是否开启eslint保存检测，有效值: true || false || 'error'
}

配置跨域请求

module.exports = {
    baseUrl: '/', // 根路径
    outputDir: 'dist', // 构建输出目录 npm run build
    assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
    lintOnSave: false, // 是否开启eslint保存检测，有效值: true || false || 'error'
    devServer: {
        open: false, // 使用npm run serve 之后是否自动在游览器中打开项目
        host: 'localhost', // 主机名字
        port: 8081, // 端口号
        https: false, // true启动游览器会给出一些警告
        hotOnly: false, // 热更新 webpack已经有
        proxy: {
            // 配置跨域，请求后端接口
            '/api': {
                target: 'http//localhost:5000/api/',
                ws: true, // 是否跨域
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

接入后台接口

module.exports = {
    baseUrl: '/', // 根路径
    outputDir: 'dist', // 构建输出目录 npm run build
    assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
    lintOnSave: false, // 是否开启eslint保存检测，有效值: true || false || 'error'
    devServer: {
        open: false, // 使用npm run serve 之后是否自动在游览器中打开项目
        host: 'localhost', // 主机名字
        port: 8081, // 端口号
        https: false, // true启动游览器会给出一些警告
        hotOnly: false, // 热更新 webpack已经有
        proxy: {
            // 配置跨域，请求后端接口
            '/api': {
                target: 'http//localhost:5000/api/',
                ws: true, // 是否跨域
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before(app) {
            // http://localhost:8081/api/goods
            app.get('/api/goods', (req, res) => {
                res.json();
            })
        }
    }
};

卸载vue-cli 3.x版本

npm uninstall -g @vue/cli

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

拉取 2.x 模板 (旧版本)

Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected]` 相同
vue init webpack my-project

vue-cli 3.0版本学习