vue笔记之vue cli2/cli3

介绍

vue-cli 是vue 官方提供的脚手架工具
Vue CLI 的包名称由 vue-cli 改成了@vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
安装新的vue-cli包：npm install @vue/cli -g
检查vue-cli是否安装正确： vue --version

创建一个 vue-cli 项目

vue cli3及以上版本：

创建项目：vue create my-project,或使用图形化界面：vue ui
配置项目
项目目录结构:
vue cli3配置去哪里了
请问Sass/SCSS(with node-sass)和Sass/SCSS(with dart-sass)选哪个？node-sass是自动编译实时的，dart-sass需要保存后才会生效。所以选择node-sass
运行项目：npm run serve

vue cli2版本项目

拉取 2.x 模板:安装一个桥接工具,这样就任然可以使用旧版本的 vue-init 功能 npm install -g @vue/cli-init
创建项目：vue init webpack my-project
配置项目
项目目录结构:
运行项目：npm run dev

vue-cli3 和vue-cli2的区别：

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
移除了static文件夹，新增了public文件夹，并且index.html移动到public中

vue-cli 项目结构

vue已经给我们新建了一个初始的项目结构，但是这个项目结构还不完善。我们需要新建一下几个目录。新建的目录都是新建在src目录下。
- views 用户存放我们的页面,主要是路由页面
- store 放置vuex程序
- api 放置所有的接口程序
- utils 放置工具函数（可有可无）
- router 放置路由信息
- styles 放置全局样式（可有可无）
- components 这个已经有了，用来存放我们页面中的组件。我们可以直接把组件新建在components目录下，不过这样不太清晰，我喜欢在components目录下，再为每个页面新建一个文件夹，把每个页面的组件放在对应的文件下
- assets 这个也已经有了，用来存放我们的资源文件，视频、音频、图片等。

vue-cli3 配置跨域请求

在项目根目录下创建一个vue.config.js 文件

下面是 vue.config.js 文件中的代码：

// ===== vue配置文件 =====

module.exports = {
    //打包是不生成.map文件
    productionSourceMap: false,

    //配置生产环境的代理
    devServer: {
        open: true, // 是否自动打开页面
        host: 'localhost',
        port: 8080, // 端口号
        https: false,
        hotOnly: false,
        proxy: { // 配置跨域
            '/api': {
                target: 'http://localhost:3001/money-management',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => {
        }
    } //devServer
};

项目的打包与发布

项目打包：

npm run build

项目发布

使用静态服务器工具包
- npm install serve -g
- serve dist
- 访问：http://localhost:5000
使用动态web服务器

来源：CSDN

作者：[子鱼]

链接：https://blog.csdn.net/weixin_43379230/article/details/104074938

标签

vue-cli

vue