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。然后配置如下:
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>中配置:
const path = require("path"); 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") } } }
然后使用时候只需这样使用就行,比如:import api from "api/login"
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" } };
Vue基础项目配置的更多相关文章
- VUE前端项目配置代理解决跨域问题
VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...
- Vue基础项目模板
https://github.com/wanglong/vue-element-admin.git 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍 一站式开源运维平台,分享给大 ...
- vue cli3 项目配置
[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...
- Vue + webpack 项目配置化、接口请求统一管理
准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题. 又或者后面其他同事接手你的模块,或者改你的bug ...
- Vue创建项目配置
前言 安装VS Code,开始vue的学习及编程,但是总是遇到各种各样的错误,控制台语法错误,格式错误.一股脑的袭来,感觉创建个项目怎么这个麻烦.这里就讲一下vue的安装及创建. 安装环境 当然第一步 ...
- Vue+webpack项目配置便于维护的目录结构
新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common ...
- 关于VsCode创建Vue基础项目的步骤以及相关问题
项目创建步骤: 1. 全局安装vue-cli 安装命令: npm install -g vue-cli 在vscode上打开一个终端,然后输入此命令(下为截图): 2. 安装webpack,打包js ...
- vue基础项目安装教程
安装node.js 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了. 安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功. ...
- 基于django的网站开发一基础项目配置
首先确认电脑上已经安装好了python和django,我的python版本是2.7.13,django版本是1.10.2.数据库我使用的是mysql,版本是5.7.17,我是windows7系统,用的 ...
随机推荐
- vscode保存代码,自动按照eslint规范格式化代码设置
# vscode保存代码,自动按照eslint规范格式化代码设置 编辑器代码风格一致,是前端代码规范的一部分.同一个项目,或者同一个小组,保持代码风格一致很必要.就拿vue项目来说,之前做的几个项目, ...
- Gradle-构建生命周期
两个重要的概念 项目 实际上,一个项目是什么取决于你要用 Gradle 做什么?项目通常代表的是构建内容. 例如在 Android 中,一个 module 就是一个项目: 项目是注册在 setting ...
- Springboot源码分析之AbstractAdvisorAutoProxyCreator
摘要: Spring的代理在上层中主要分为ProxyCreatorSupport和ProxyProcessorSupport,前者是基于代理工厂,后者是基于后置处理器,也可以认为后置就是自动代理器.当 ...
- NDK Cmake
CMake与NDK搭配使用时,可以配置的部分变量: 1. `ANDROID_PLATFORM`:指定Android的目标版本,对应`$NDK/platforms/`目录下的版本.通常情况下是`defa ...
- Java网络编程 -- NIO非阻塞网络编程
从Java1.4开始,为了替代Java IO和网络相关的API,提高程序的运行速度,Java提供了新的IO操作非阻塞的API即Java NIO.NIO中有三大核心组件:Buffer(缓冲区),Chan ...
- java两个对象属性比较
两个对象进行比较相等,有两种做法: 1,情况一:当仅仅只是判断两个对象是否相等时,只需重写equals()方法即可.这里就不用说明 2.情况二:当除了情况一之外,还需知道是那个属性不同,那么就需要采用 ...
- swith case判断
swith case是js中的一种判断方式 应用于变量或表达式在不同值情况下的不同操作,每一种case结束都要加break结束整个判断 var num = 2; switch(num){ case 0 ...
- JavaScript数组方法详解
JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...
- Java之戳中痛点 - (8)synchronized深度解析
概览: 简介:作用.地位.不控制并发的影响 用法:对象锁和类锁 多线程访问同步方法的7种情况 性质:可重入.不可中断 原理:加解锁原理.可重入原理.可见性原理 缺陷:效率低.不够灵活.无法预判是否成功 ...
- unity之初级必备知识
C#中有两种常见类型:值类型,引用类型.值类型存放在内存中栈里,引用类型在内存中栈里存放引用,实际存放在内存中的堆里.值类型继承自System.ValueType.System.ValueType继承 ...