使用vue脚手架搭建项目详解

最新推荐文章于 2024-10-09 16:27:07 发布

写写代码AAA

最新推荐文章于 2024-10-09 16:27:07 发布

阅读量7.3k

点赞数 13

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_28988969/article/details/104472205

版权

本文详述了使用Vue CLI4搭建项目的过程，包括安装vue脚手架、创建项目、选择目录、预设功能、配置插件如Element UI、安装依赖如axios、less、v-charts和moment。此外，还介绍了项目目录结构、配置自动打开浏览器、处理eslint警告、删除默认组件、创建登录组件、设置路由、配置环境变量以及axios、v-charts和moment的配置方法。

摘要由CSDN通过智能技术生成

安装vue脚手架

这里的版本是vue cli4

cnpm i @vue/cli -g

查看vue cli版本

vue --version

启动vue脚手架图形化界面

打开命令行，输入以下命令

vue ui

通过vue脚手架图形化界面创建项目

选择项目目录

选择一个项目目录，点击在此创建新项目按钮
在这里插入图片描述

详情

填写项目名称，git初始化信息，点击下一步
在这里插入图片描述

预设

有提前准备好的预设就选择准备好的，没有就选择手动，点击下一步
在这里插入图片描述

功能

创建项目时，以下四个功能一般需要选择

Babel
Router
Linter/Formatter
使用配置文件

vuex功能按照自身需求决定是否需要添加
点击下一步
在这里插入图片描述

配置

Pick a linter/formatter config选择标准配置ESLint + Standard config，点击创建项目

是否需要保留预设这个看你自己，需要的话给预设命名，保留，下一次直接使用即可
在这里插入图片描述

插件

选择插件，点击添加插件按钮
在这里插入图片描述

安装Element ui

搜索 vue-cli-plugin-element 安装
在这里插入图片描述
配置element ui-How do you want to import Element?

Fully import表示全量导入
Import on demand表示按需导入，可以减少打包后项目体积

不过我们后续一般会做项目优化，所以直接默认配置就可以了

点击完成安装
在这里插入图片描述

依赖

选择依赖，点击安装依赖
在这里插入图片描述

安装axios

选择运行依赖，搜索 axios
在这里插入图片描述

安装less，less-loader

选择开发依赖，搜索 less
在这里插入图片描述
选择开发依赖，搜索 less-loader

安装v-charts

Vue项目中使用v-charts

安装moment

Vue项目中使用moment.js

项目目录简介

在这里插入图片描述

配置项目启动自动打开浏览器和启动端口

每次启动项目时，都需要重新打开浏览器，解决办法就是添加一个配置文件，帮我们自动打开浏览器

在项目的根目录创建文件vue.config.js文件

// 如果有报错，检查一下是不是空格问题导致的
module.exports = {
   
  // 设置打包后输出的目录
  outputDir: '../static',
  // 设置打包后静态资源目录
  assetsDir: 'static',
  devServer: {
   
    // 设置自动打开浏览器
    open: true,
    // 端口号
    port: 9999
  }
}