Vue基础项目配置

一,使用Vuejs搭建项目需要一些基础配置,这样能使的编程过程事半功倍

  1. 首先下载nodejs,然后使用nodejs使用NPM命令下载VueCli3.0以上的Vue脚手架。通过脚手架可以使用Vue ui图形界面创建项目,也可以使用vue create xxx来使用命令行来创建项目。
  2. 创建项目之时最重要的选项就是使用配置文件最好各个配置文件分开,不要集中在<vue.confing.js>。
  3. 创建完项目之后启动项目npm run serve.
  4. 在项目目录打开一个新的命令提示行来安装Vue的插件和各种loader。

二、各种loader,不知道loader的请自行Google

  1. file-loader,这个包必须安装他可以加载比如svg、image等文件,直接安装无需配置,安装命令npm install file-loader -D
  2. svg-sprite-loader,这个安装包用来高效率的使用icon图标,这个需要配置,安装命令npm install svg-sprite-loader -D,首先在根目录下新建配置文件vue.config.js。然后配置如下:

    const path = require("path");

     chainWebpack: config => {
        config.module
          .rule("svg")
          .exclude.add(path.resolve("./src/icons"))
          .end();
        config.module
          .rule("icons")
          .test(/\.svg$/)
          .include.add(path.resolve("./src/icons"))
          .end()
          .use("svg-sprite-loader")
          .loader("svg-sprite-loader")
          .options({
            symbolId: "icon-[name]"
          })
          .end();
      }
  3. normalize.css ,消除各个浏览器的默认值,直接使用npm install  normalize.css 安装,在main.js中import导入即可
  4. js-cookie,简单使用cookie,提供各种操作cookie的操作,直接使用npm install js-cookie
  5. autoprefixer 给各个不同的浏览器添加前缀,以适用不同的浏览器的一些css规则,在<.browserslistrc>配置文件中更改配置,具体配置参见github。
  6. 有时候路径嵌套比较深看起来比较懵。可以配置文件路径的alias,这样的话看起来就简洁明了,具体配置在<vue.config.js>中配置,然后使用时候只需这样使用就行,比如:import api from "api/login"

      configureWebpack: {
        resolve: {
          alias: {
            view: path.resolve("./src/views"),
            comp: path.resolve("./src/components"),
            api: path.resolve("./src/api"),
            layer: path.resolve("./src/layers"),
            icon: path.resolve("./src/icons")
          }
        }
      }
  7. 配置完webpack之后可以使用vue inspect --rule xxx 来检查配置是否正确,配置正确之后重新启动项目

三、配置ESlint,配置好之后可以自动纠正编写问题,使代码优美好看

  1. 在创建vue项目的时候需要选择是否使用Eslint来纠正代码错误,一定要选择在保存使纠正。当然后期也可以在配置文件中更改
  2. 在创建vue项目的时候也要选择Eslin的纠正使用的模板,建议使用<prettier>,如果没有可以使用npm install  prettier -D
  3. 安装 eslint-plugin-html 不用配置,npm install eslint-plugin-html -D
  4. 文件->首选项->配置->插件,找到Eslint,右上角打开配置(json),配置如下代码:

        "eslint.validate": [
            "javascript",
            "javascriptreact",
            "html",
            {"language": "vue","autoFix": true}
        ],
        "eslint.options": {
            "plugins":["html","vue"]
        },
        "files.autoSave": "off",
        "extensions.autoUpdate": false,
        "eslint.autoFixOnSave": true,
        "eslint.alwaysShowStatus": true,
        "eslint.lintTask.enable": true,
        "eslint.experimental.incrementalSync": true,
        "editor.tabSize": 2,
  5. 在<.eslintrc.js>中配置如下:

    module.exports = {
      root: true,
      env: {
        node: true
      },
      extends: ["plugin:vue/essential", "@vue/prettier"],
      rules: {
        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
      },
      parserOptions: {
        parser: "babel-eslint"
      }
    };

原文地址:https://www.cnblogs.com/wenlibest/p/11583644.html

时间: 2024-10-09 21:55:44

Vue基础项目配置的相关文章

electron+react-redux-saga基础项目配置

electron-react-base 基于electron + react + redux + saga的基础项目配置github:https://github.com/maichonglyd/electron-react-base 项目结构: app 最终要打包的目录 build 调试项目时打包的目录 flow flow语法定义目录 img 图片目录 scss 界面样式目录 src 界面代码目录 webpack webpack打包配置目录 src下目录结构: components 界面组件目

vue多项目配置,vuecli3.0+cross-env配置问题

cross-env相信大家都用过,这里就不过多描述,首先我们来安装cross-env npm install cross-env 或者yarn add cross-env 安装完成之后就可以在项目中使用,有些脚手架自带有cross-env(Ant-Design-Pro)所以就省去安装了 今天给大家介绍的是vue-cli脚手架3.0+之后cross-env的使用方式 之前一直使用的vue-cli2.0,2.0配置文件很多,在开发和生产配置文件中配置了cross-env中的变量之后就能正常使用了,

Code::Blocks项目配置基础

File 菜单 New :新建( Empty file/file . class . project . build target ) . Recent projects/files :最近打开的项目 / 文件 . Import projects : Dev-C++ Project . VC6 dsw/dsp . VC8 vcproj/sln . Ctrl+Shift+S : Save all files . Save workspace (as) :将多个项目组织成一个工作空间,类似 VC 的

vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目的请求生命周期 三.vue项目中的功能 1. 路由相关的标签和方法 2. 路由配置 (1)无路由传参的路由配置方法 (2)路由传参的路由配置方法 3. 页面的跳转功能 (1)标签跳转 (2)逻辑跳转(路由跳转) 四.JS原型 五.vue组件生命周期钩子 六.vue的ajax插件:axios 七.vu

vue创建项目初始化及基本配置

目录 创建新项目初始化 vue的ajax插件: axios 1)安装插件(一定要在项目目录下): 2)在main.js中配置: 3)在任何一个组件的逻辑中发送ajax请求: CORS跨域问题(同源策略) Vue配置ElementUI Vue配置bs环境 安装插件 创建新项目初始化 node_modules不需要动 public不动 src中在assets中创建css js 和img文件夹 router文件夹中的index.js只保留一个home的路由配置 App.vue只留五行代码即可 Home

vue.js项目构建基础

这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJs安装是否成功? nodeJs安装完成,自带npm,可以检查npm是否已经安装 安装webpack. webpack是一个模块加载器兼打包工具,在vue项目中,为了更好的管理代码使用模块系统,使用webpack打包. 安装webpack  查看webpack是否安装成功? 安装 vue-cli 脚手

vue项目配置

安装打包工具 webpack:npm install webpack -g 安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装:npm install vue-cli -g 还原git项目中的node_modules:npm install 安装 Yarn: npm i yarn -g --verbose 表格拖动,扩展: npm install --save vue-draggable-resizable 2. 创建一个项目 # 使用命令行进行初始化. $ vue crea

AspNetCore MVC + Vue.Js 项目搭建

1.准备 全文重点在于搭建环境,其他相关知识点请百度. VS2017 升级到最新的版本 安装 net core 2.0 安装 npm (npm相关使用请百度或咨询前端小伙伴) 全局安装 webpack (webpack相关使用请百度或咨询前端小伙伴) vue 的使用 (推荐看一下vue创建的webpack项目模板) axios的使用,vue中用于调用后端接口的方法 2.创建AspNetCore MVC项目 3.清空项目 删除不必要的文件后,项目文件结果如下: 4.初始化项目 4.1 在项目web

关于vue项目管理项目的架构管理平台

关于vue项目管理项目的架构管理平台 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/faq 31.4k 次浏览 完整项目地址:vue-element-admin系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板) 前