脚本宝典收集整理的这篇文章主要介绍了13_06、Vue-CLI 项目搭建,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1 单文件组件
https://cn.vuejs.org/v2/guide/single-file-components.html#ad
2 Vue-CLI 项目搭建
2.1 环境搭建
1234567891011121314151617
|
- 安装node官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/- 安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org- 安装脚手架cnpm install -g @vue/cli- 清空缓存处理npm cache clean --force
|
2.2 项目的创建
创建项目
启动/停止项目
12
|
npm run serve / ctrl+c
|
打包项目
package.json中
12345
|
"scripts": { "serve": "vue-cli-service serve",
|
2.3 认识项目
项目目录
123456789101112131415
|
dist: 打包的项目目录(打包后会生成)node_modules: 项目依赖(删掉,不上传git,使用npm install重新安装)public: 共用资源 --favicon.ico --index.html:项目入口页面,单页面src: 项目目标,书写代码的地方 -- assets:资源 -- components:组件 -- views:视图组件 -- App.vue:根组件 -- main.js: 入口js -- router.js: 路由文件 -- store.js: 状态库文件vue.config.js: 项目配置文件(没有可以自己新建)package.json:项目配置依赖(等同于python项目的reqirement.txt)
|
配置文件:vue.config.js
main.js 整个项目入口文件
12345678910111213141516171819202122
|
|
vue文件
123456789101112131415
|
<template>
|
定义组件
ESLint
12345678910
|
ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别,规则本身和测试可以依赖于同样的模式。为了便于人们使用,ESLint 内置了一些规则,当然,你可以在使用过程中自定义规则。ESLint 使用 Node.js 编写,这样既可以有一个快速的运行环境的同时也便于安装js语法规范性检查,类似于PEP8规范官网https://eslint.bootcss.com/docs/about/
|
1、使用vue-cli:
在vue-cli在init初始化时会询问是否需要添加ESLint,确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。
.eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。 .eslintrc.js是ESLint配置文件,用来设置插件、自定义规则、解析器等配置。
执行:npm run lint 会自动修复代码
2、配置ESLint:
Vue的项目配置eslint还是很简单的。它属于依赖插件中的一种,可以像安装其他插件一样在命令行用npm
install eslint -g安装,也可以修改package.json文件去更新项目的依赖包,重新跑一遍npm install就可以了。
eslint常用的依赖有很多,我贴出我用的一些。在package.jsonde
的dependencies或者devDependencies中添加下列属性即可:
1234567
|
"babel-eslint": "^7.1.1", "eslint-config-standard": "^6.2.1", "eslint-friendly-formatter": "^2.0.7", "eslint-loader": "^1.6.1", "eslint-plugin-html": "^2.0.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^2.0.1",
|
但是有可能项目没有生成 eslintrc.js,码友可以去网上搜eslintrc.js然后放在项目根目录下即可。
3 vue项目中关闭ESLint
时候会被ESLint的报错阻止程序的运行,这时候我们就想关闭这个ESLint了。在vue项目中关闭ESLint方法:
4 配置示例
在package.json中通过eslintConfig配置,示例:
123456789101112131415161718192021222324252627
|
"eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/standard" ], "rules": { "eol-last": [0], "semi": [2, "always"],
|
脚本宝典总结
以上是脚本宝典为你收集整理的13_06、Vue-CLI 项目搭建全部内容,希望文章能够帮你解决13_06、Vue-CLI 项目搭建所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。