Skip to content

Commit b184088

Browse files
WindRunnerMaxWindRunnerMax
committed
feat: vue cli
1 parent fb4073a commit b184088

22 files changed

+3232
-58
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
<tr>
2222
<td><a href="https://juejin.cn/post/7265515986471092239">初探webpack之从零搭建Vue开发环境</a></td>
23+
<td><a href="./packages/vue-cli">packages/vue-cli</a></td>
2324
</tr>
2425

2526
<tr>

‎packages/vue-cli/.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 4
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎packages/vue-cli/.eslintrc.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
module.exports = {
2+
parser: "vue-eslint-parser",
3+
extends: ["eslint:recommended", "plugin:prettier/recommended"],
4+
overrides: [
5+
{
6+
files: ["*.ts"],
7+
parser: "@typescript-eslint/parser",
8+
plugins: ["@typescript-eslint"],
9+
extends: ["plugin:@typescript-eslint/recommended"],
10+
},
11+
{
12+
files: ["*.vue"],
13+
parser: "vue-eslint-parser",
14+
extends: [
15+
"plugin:vue/recommended",
16+
"plugin:prettier/recommended",
17+
"plugin:@typescript-eslint/recommended",
18+
],
19+
},
20+
],
21+
parserOptions: {
22+
ecmaVersion: 2020,
23+
sourceType: "module",
24+
parser: "@typescript-eslint/parser",
25+
},
26+
env: {
27+
browser: true,
28+
node: true,
29+
commonjs: true,
30+
es2021: true,
31+
},
32+
rules: {
33+
// 分号
34+
"semi": "error",
35+
// 对象键值引号样式保持一致
36+
"quote-props": ["error", "consistent-as-needed"],
37+
// 箭头函数允许单参数不带括号
38+
"arrow-parens": ["error", "as-needed"],
39+
// no var
40+
"no-var": "error",
41+
// const
42+
"prefer-const": "error",
43+
// 允许console
44+
"no-console": "off",
45+
},
46+
};

‎packages/vue-cli/babel.config.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
presets: [
3+
[
4+
"@babel/preset-env",
5+
{
6+
useBuiltIns: "usage",
7+
corejs: 3,
8+
modules: false,
9+
},
10+
],
11+
],
12+
};

‎packages/vue-cli/package.json

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "vue-cli",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"scripts": {
7+
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
8+
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
9+
},
10+
"devDependencies": {
11+
"@babel/core": "7.15.8",
12+
"@babel/plugin-syntax-typescript": "7.14.5",
13+
"@babel/preset-env": "7.15.8",
14+
"@webpack-cli/serve": "2.0.5",
15+
"babel-loader": "8.2.2",
16+
"cross-env": "7.0.3",
17+
"css-loader": "6.4.0",
18+
"eslint-plugin-vue": "7.19.1",
19+
"file-loader": "6.2.0",
20+
"html-webpack-plugin": "5.3.2",
21+
"husky": "7.0.2",
22+
"lint-staged": "11.2.3",
23+
"postcss": "8.3.9",
24+
"postcss-loader": "6.2.0",
25+
"prettier": "2.4.1",
26+
"sass": "1.43.2",
27+
"sass-loader": "10.1.1",
28+
"ts-loader": "9.2.6",
29+
"tslib": "2.6.2",
30+
"url-loader": "4.1.1",
31+
"vue-class-component": "7.2.6",
32+
"vue-eslint-parser": "7.11.0",
33+
"vue-loader": "15.9.8",
34+
"vue-property-decorator": "9.1.2",
35+
"vue-style-loader": "4.1.3",
36+
"vue-template-compiler": "2.6.14",
37+
"vuex-class": "0.3.2",
38+
"webpack": "5.56.1",
39+
"webpack-cli": "4.10.0",
40+
"webpack-dev-server": "4.3.1"
41+
},
42+
"dependencies": {
43+
"core-js": "3",
44+
"vue": "2.6.14",
45+
"vue-router": "3.5.2",
46+
"vuex": "3.6.2"
47+
},
48+
"lint-staged": {
49+
"*.{js,vue,ts}": [
50+
"eslint --fix"
51+
]
52+
}
53+
}

‎packages/vue-cli/public/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title><%= htmlWebpackPlugin.options.title %></title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<!-- built files will be auto injected -->
12+
</body>
13+
</html>

‎packages/vue-cli/src/App.vue

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
<router-view />
4+
</div>
5+
</template>

‎packages/vue-cli/src/common/styles.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
$color-blue: #4C98F7;

‎packages/vue-cli/src/components/tab-a.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div>Example A</div>
3+
</template>
4+
5+
<script lang="ts">
6+
import { Component, Vue } from "vue-property-decorator";
7+
@Component
8+
export default class TabA extends Vue {}
9+
</script>

‎packages/vue-cli/src/components/tab-b.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div>Example B</div>
3+
</template>
4+
5+
<script lang="ts">
6+
import { Component, Vue } from "vue-property-decorator";
7+
@Component
8+
export default class TabB extends Vue {}
9+
</script>

‎packages/vue-cli/src/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import "./main";
2+
3+
import { add } from "./sum";
4+
5+
console.log(add(1, 1));

‎packages/vue-cli/src/main.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Vue from "vue";
2+
3+
import App from "./App.vue";
4+
import Router from "./router";
5+
import Store from "./store";
6+
7+
const app = new Vue({
8+
router: Router,
9+
store: Store,
10+
...App,
11+
});
12+
app.$mount("#app");

‎packages/vue-cli/src/router/index.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Vue from "vue";
2+
import VueRouter from "vue-router";
3+
4+
Vue.use(VueRouter);
5+
6+
import TabA from "../components/tab-a.vue";
7+
import TabB from "../components/tab-b.vue";
8+
import FrameWork from "../views/framework.vue";
9+
10+
const routes = [
11+
{
12+
path: "/",
13+
component: FrameWork,
14+
children: [
15+
{
16+
path: "tab-a",
17+
name: "TabA",
18+
component: TabA,
19+
},
20+
{
21+
path: "tab-b",
22+
name: "TabB",
23+
component: TabB,
24+
},
25+
],
26+
},
27+
];
28+
29+
export default new VueRouter({
30+
routes,
31+
});

‎packages/vue-cli/src/sfc.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module "*.vue" {
2+
import Vue from "vue";
3+
export default Vue;
4+
}

‎packages/vue-cli/src/static/vue-large.png

35.8 KB
Loading

‎packages/vue-cli/src/static/vue.jpg

5.01 KB
Loading

‎packages/vue-cli/src/store/index.ts

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Vue from "vue";
2+
import Vuex from "vuex";
3+
4+
Vue.use(Vuex);
5+
6+
export interface State {
7+
text: string;
8+
}
9+
const state: State = {
10+
text: "Value",
11+
};
12+
13+
const getters = {
14+
getText(state: State) {
15+
return state.text;
16+
},
17+
};
18+
19+
const mutations = {
20+
setText: (state: State, text: string) => {
21+
state.text = text;
22+
},
23+
};
24+
25+
export default new Vuex.Store({
26+
state,
27+
mutations,
28+
getters,
29+
});

‎packages/vue-cli/src/sum.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const add = (a: number, b: number): number => a + b;

‎packages/vue-cli/src/views/framework.vue

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div>
3+
<section>
4+
<img src="../static/vue.jpg" alt="" class="vue" />
5+
<img src="../static/vue-large.png" alt="" class="vue-large" />
6+
<div class="example">{{ msg }}</div>
7+
<button @click="toast">Alert</button>
8+
</section>
9+
<section>
10+
<router-link to="/tab-a">TabA</router-link>
11+
<router-link to="/tab-b">TabB</router-link>
12+
<router-view />
13+
</section>
14+
<section>
15+
<button @click="setVuexValue">Set Vuex Value</button>
16+
<div>{{ text }}</div>
17+
</section>
18+
</div>
19+
</template>
20+
21+
<script lang="ts">
22+
import { Component, Vue } from "vue-property-decorator";
23+
import { State } from "vuex-class";
24+
25+
@Component
26+
export default class FrameWork extends Vue {
27+
public msg = "Example";
28+
29+
@State("text") text!: string;
30+
31+
public toast() {
32+
window?.alert("ExampleMessage");
33+
}
34+
35+
public setVuexValue() {
36+
this.$store.commit("setText", "New Value");
37+
}
38+
}
39+
</script>
40+
41+
<style scoped lang="scss">
42+
@import "../common/styles.scss";
43+
.vue {
44+
width: 100px;
45+
}
46+
.vue-large {
47+
width: 300px;
48+
}
49+
.example {
50+
color: $color-blue;
51+
font-size: 30px;
52+
}
53+
section {
54+
margin: 10px;
55+
}
56+
</style>

‎packages/vue-cli/tsconfig.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"module": "esnext",
5+
"strict": true,
6+
"jsx": "preserve",
7+
"importHelpers": true,
8+
"moduleResolution": "node",
9+
"esModuleInterop": true,
10+
"allowSyntheticDefaultImports": true,
11+
"experimentalDecorators":true,
12+
"sourceMap": true,
13+
"skipLibCheck": true,
14+
"baseUrl": ".",
15+
"types": [],
16+
"paths": {
17+
"@/*": [
18+
"./src/*"
19+
]
20+
},
21+
"lib": [
22+
"esnext",
23+
"dom",
24+
"es5",
25+
"ES2015.Promise",
26+
]
27+
},
28+
"exclude": [ "node_modules" ]
29+
}

0 commit comments

Comments
 (0)