Vue-CLI 项目搭建
1 单文件组件
https://cn.vuejs.org/v2/guide/single-file-components.html#ad
2 Vue-CLI 项目搭建
2.1 环境搭建
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
- 安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装脚手架
cnpm install -g @vue/cli
- 清空缓存处理
npm cache clean --force
|
2.2 项目的创建
创建项目
1
2
3
4
5
|
vue create 项目名
vue ui 使用图形界面创建项目
|
启动/停止项目
1
2
|
npm run serve / ctrl+c
|
打包项目
package.json中
1
2
3
4
5
|
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
|
2.3 认识项目
项目目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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
1
2
3
4
5
6
7
|
module.exports={
devServer: {
port: 8888
}
}
|
main.js 整个项目入口文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
|
vue文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<template>
</template>
<script>
</script>
<style scoped>
</style>
|
定义组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
components-->HelloWorld.vue
<script>
import HelloWorld from'@/components/HelloWorld.vue'
import Vue from'vue'
Vue.component('HelloWorld',HelloWorld)
export default {
components: {
HelloWorld:HelloWorld
},
}
</script>
|
ESLint
1
2
3
4
5
6
7
8
9
10
|
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中添加下列属性即可：
1
2
3
4
5
6
7
|
"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配置，示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"rules": {
"eol-last": [0],
"semi": [2, "always"],
"indent": [2, 4],
"no-new": [0],
"no-debugger": [0],
"camelcase": [0, {"properties": "never"}]
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"eslintIgnore": [
"dist/*",
"node_modules/*",
"build/*",
"*.md"
],
|
每天逼着自己写点东西，终有一天会为自己的变化感动的。这是一个潜移默化的过程，每天坚持编编故事，自己不知不觉就会拥有故事人物的特质的。 Explicit is better than implicit.(清楚优于含糊)