工程化开发和脚手架Vue CLI

43次阅读
没有评论

共计 515 个字符,预计需要花费 2 分钟才能阅读完成。

Vue CLI 是 Vue 官方提供的一个全局命令工具。可以快速创建一个开发 Vue 项目的标准化基础架子,集成了 webpack 配置。

使用脚手架的好处是:

  • 开箱即用,零配置
  • 内置 babel 等工具
  • 标准化

使用步骤

全局安装脚手架:npm i -g @vue/cli

查看版本:vue --version

创建项目架子:vue create vue-demo,不喜欢用命令行界面创建项目的话,可通过图形化界面向导来创建项目:vue ui

启动项目:cd vue-demo 然后 npm run serve

修改配置

webpack 文档地址:https://webpack.js.org/configuration/dev-server/

修改 vue.config.js 文件:

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8080, // 修改端口
    // 添加代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
})

正文完
 0
三毛笔记
版权声明:本站原创文章,由 三毛笔记 于2023-12-04发表,共计515字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)