vue-cli 3.0版本学习

Z时代
2024-01-10
分类：综合

vue

github地址 docs文件夹

文档地址

安装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();
            })
        }
    }};