vue手撸移动端后台（2）基础项目搭建

最新推荐文章于 2024-04-10 11:20:07 发布

林子曰

最新推荐文章于 2024-04-10 11:20:07 发布

阅读量505

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_21019419/article/details/89710922

版权

本文详述如何在Mac环境下使用Vue CLI 3搭建一个基础的移动端后台项目，包括Vue项目的创建、VSCode配置、关键插件安装、vue.config.js与.prettierc.json配置，以及解决eslint与prettier冲突问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这一篇主要是搭建基础项目，完全空的项目，还有一些基本配置
本项目使用mac 开发环境，所以做个参考，window其实差别不大
关键词：

npm
vue-cli 3
vscode配置

1. 电脑环境

怎么安装node，vuecli3这里就不做详细的介绍了，大家自学一下，不难。（mac使用brew install node之后，直接改源：npm config set registry https://registry.npm.taobao.org即可，不要下载cnpm，不要用cnpm，不要用cnpm）
在这里插入图片描述

2. vscode配置

这里主要是编辑环境的一些配置，格式化之类的。推荐的工具必然是万能的vscode，
我的插件列表：
在这里插入图片描述

vue项目中的几个关键插件为：

贴出我的setting配置：

进入设置之后，点击右上角的{}进入编辑界面

vscode配置

{
   
// 图标
  "workbench.iconTheme": "material-icon-theme",
  //git自动拉新
  "git.autofetch": true,
  // "editor.suggestSelection": "first",
  // "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "files.associations": {
   
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
   
    "vue-html": "html",
    "vue": "html",
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,

  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    {
   
      "language": "javascript",
      "autoFix": true
    },
    {
   
      "language": "vue",
      "autoFix": true
    }
  ],
  //  prettier 配置属性说明:https://segmentfault.com/a/1190000012909159

最低0.47元/天解锁文章