diff --git a/vue-admin-wonderful-next-docs/docs/.vuepress/config.js b/vue-admin-wonderful-next-docs/docs/.vuepress/config.js
index 17645df..a30fdc4 100644
--- a/vue-admin-wonderful-next-docs/docs/.vuepress/config.js
+++ b/vue-admin-wonderful-next-docs/docs/.vuepress/config.js
@@ -33,6 +33,7 @@ module.exports = {
* ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html
*/
themeConfig: {
+ smoothScroll: true,
repo: '',
editLinks: false,
docsDir: '',
@@ -49,15 +50,11 @@ module.exports = {
},
{
text: '主题',
- link: '/vsCode/'
+ link: '/theme/'
},
{
text: '更新记录',
- link: '/config/'
- },
- {
- text: '问题与处理',
- link: '/config/'
+ link: '/update/'
},
{
text: 'vsCode',
@@ -71,11 +68,11 @@ module.exports = {
items: [
{
text: 'vue-admin-wonderful（2.x版本）',
- link: ''
+ link: '11'
},
{
text: 'vue-admin-wonderful-next（3.x版本）',
- link: ''
+ link: '12'
}
]
},
@@ -84,11 +81,11 @@ module.exports = {
items: [
{
text: 'vue-admin-wonderful（2.x版本）',
- link: ''
+ link: '13'
},
{
text: 'vue-admin-wonderful-next（3.x版本）',
- link: ''
+ link: '14'
}
]
}
@@ -98,7 +95,7 @@ module.exports = {
sidebar: {
'/guide/': [
{
- title: 'Guide',
+ title: '指南',
collapsable: false,
children: [
'',
@@ -106,6 +103,15 @@ module.exports = {
]
}
],
+ '/config/': [
+ {
+ title: '配置',
+ collapsable: false,
+ children: [
+ ''
+ ]
+ }
+ ],
}
},
diff --git a/vue-admin-wonderful-next-docs/docs/README.md b/vue-admin-wonderful-next-docs/docs/README.md
index 48b0786..269a701 100644
--- a/vue-admin-wonderful-next-docs/docs/README.md
+++ b/vue-admin-wonderful-next-docs/docs/README.md
@@ -2,7 +2,7 @@
home: true
heroImage: https://v1.vuepress.vuejs.org/hero.png
heroText: vue-admin-wonderful
-tagline: 这是 vue3.x + vite + element plus + typeScript 的开发文档
+tagline: 这是 vue3.x + vite + element plus + typescript 的开发文档
actionText: 快速上手 →
actionLink: /guide/
features:
diff --git a/vue-admin-wonderful-next-docs/docs/config/README.md b/vue-admin-wonderful-next-docs/docs/config/README.md
index 63a04b9..f968457 100644
--- a/vue-admin-wonderful-next-docs/docs/config/README.md
+++ b/vue-admin-wonderful-next-docs/docs/config/README.md
@@ -1,15 +1,109 @@
----
-sidebar: auto
----
+# 创建 vue3.x vite 项目
-# Config
+## 安装 vite
-## foo
+```bash
+# 全局安装 vite
+npm install create-vite-app -g
-- Type: `string`
-- Default: `/`
+# 创建项目，xxx 为项目名称
+create-vite-app xxx
-## bar
+# 进入目录
+cd xxx
-- Type: `string`
-- Default: `/`
+# 安装依赖
+npm install
+
+# 运行
+npm run dev
+```
+
+## 安装 typescript
+#### 1、安装
+
+```bash
+# 安装
+cnpm install typescript --save-dev
+
+# 初始化 tsconfig.json，注意初始化时与安装 typescript 同级（项目根目录）
+npx tsc --init
+```
+
+npm 安装依赖 `dependencies` 和 `devDependencies` 的区别：
+- `dependencies`：是需要发布到生产环境的
+- `devDependencies`：里面的插件只用于开发环境，不用于生产环境
+
+npm 安装方式：
+- `dependencies`：npm install 依赖名称 --save
+- `devDependencies`：npm install 依赖名称 --save-dev
+
+其它说明：
+- `dependencies`：插件不管你引不引入都会打包到文件中去
+- `devDependencies`：若文件中 import 引入 devDependencies 中插件，依然会把当前引入的插件打包到文件中，不引入则不打包
+
+#### 2、改成 `.ts` 后缀
+将 `main.js` 修改为 `main.ts`，同时将 `index.html` 里面的引用也修改为 `main.ts`，然后在 `script` 里添加 `lang="ts"`
+
+index.html
+```html
+
+
+
+
+
+
+ Vite App
+
+
+
+
+
+
+```
+
+app.vue
+```html
+
+ 
+
+
+
+
+
+```
+
+#### 3、出现问题：找不到模块 `./App.vue` 或其相应的类型声明
+打开 main.ts 会发现 `import App from App.vue` 会报错: 找不到模块 `./App.vue` 或其相应的类型声明，这是因为现在 ts 还没有识别 vue 文件，需要进行下面的配置：
+
+在项目根目录添加 `shim.d.ts` 文件：
+
+```js
+declare module "*.vue" {
+ import { Component } from "vue"
+ const component: Component
+ export default component
+}
+```
+
+#### 4、出现问题：安装了 `Vetur` 的话，出现 `[vue/no-multiple-template-root]The template root requires exactly one element.eslint-plugin-vue` 的警告
+
+处理方法：关闭了 `Vetur`，Vetur认为这是 Vue 2项目，因为它位于VS Code工作区中。
+
+::: warning 提示
+参考顶部 `vsCode` 链接中，打开 `首选项 - 设置 - settings.json`
+:::
+
+```json
+"vetur.validation.template": false,
+"vetur.validation.script": false,
+"vetur.validation.style": false,
+```
\ No newline at end of file
diff --git a/vue-admin-wonderful-next-docs/docs/guide/using-vue.md b/vue-admin-wonderful-next-docs/docs/guide/using-vue.md
index 71ac45b..3790842 100644
--- a/vue-admin-wonderful-next-docs/docs/guide/using-vue.md
+++ b/vue-admin-wonderful-next-docs/docs/guide/using-vue.md
@@ -6,4 +6,3 @@ Because VuePress applications are server-rendered in Node.js when generating sta
If you are using or demoing components that are not SSR friendly (for example containing custom directives), you can wrap them inside the built-in `` component:
-##
diff --git a/vue-admin-wonderful-next-docs/docs/theme/README.md b/vue-admin-wonderful-next-docs/docs/theme/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/vue-admin-wonderful-next-docs/docs/update/README.md b/vue-admin-wonderful-next-docs/docs/update/README.md
new file mode 100644
index 0000000..fa290d2
--- /dev/null
+++ b/vue-admin-wonderful-next-docs/docs/update/README.md
@@ -0,0 +1,7 @@
+---
+sidebar: auto
+---
+# 更新日志
+## 2020-12-08
+- 创建 vue-admin-wonderful-next目录，包含主体项目、文档、图片库
+
diff --git a/vue-admin-wonderful-next-docs/docs/vsCode/README.md b/vue-admin-wonderful-next-docs/docs/vsCode/README.md
new file mode 100644
index 0000000..9bd8344
--- /dev/null
+++ b/vue-admin-wonderful-next-docs/docs/vsCode/README.md
@@ -0,0 +1,80 @@
+---
+sidebar: auto
+---
+# visualstudio
+
+[官网：https://code.visualstudio.com/](https://code.visualstudio.com/)
+
+## 一、首选项 - 设置 - settings.json
+
+```json
+{
+ // 使用单引号替代双引号
+ "prettier.singleQuote": true,
+ // 这个按用户自身习惯选择
+ "vetur.format.defaultFormatter.html": "js-beautify-html",
+ "vetur.format.defaultFormatter.js": "vscode-typescript",
+ "vetur.format.defaultFormatterOptions": {
+ "js-beautify-html": {
+ "wrap_line_length": 120,
+ "wrap_attributes": "auto",
+ "end_with_newline": false
+ }
+ },
+ "workbench.iconTheme": "material-icon-theme",
+ "[vue]": {
+ "editor.defaultFormatter": "octref.vetur"
+ },
+ "[scss]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[jsonc]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[javascript]": {
+ "editor.defaultFormatter": "vscode.typescript-language-features"
+ },
+ "[html]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "backgroundCover.imagePath": "c:\\Users\\Administrator\\Desktop\\文档\\2023154.jpg",
+ "search.followSymlinks": false,
+ "backgroundCover.opacity": 0.5,
+ "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
+}
+```
+
+## 二、vsCode 插件
+1. Auto Close Tag
+1. Auto Rename Tag
+1. background-cover
+1. Bracket Pair Colorizer
+1. Chinese (Simplified) Language Pack for Visual Studio Code
+1. Color Info
+1. Community Material Theme
+1. Debugger for Chrome
+1. filesize
+1. GitLens — Git supercharged
+1. HTML Boilerplate
+1. HTML CSS Support
+1. HTML Snippets
+1. HTMLHint
+1. Icon Fonts
+1. JavaScript (ES6) code snippets
+1. markdown-formatter
+1. Material Icon Theme
+1. Material Theme
+1. Material Theme Icons
+1. open in browser
+1. Path Intellisense
+1. Prettier - Code formatter
+1. Vetur
+
+## 三、图文步骤
+
+#### 1、打开设置
+
+
+
+#### 2、安装插件
+
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/index.html b/vue-admin-wonderful-next/index.html
index a508f20..11603f8 100644
--- a/vue-admin-wonderful-next/index.html
+++ b/vue-admin-wonderful-next/index.html
@@ -1,13 +1,13 @@
-
-
-
-
- Vite App
-
-
-
-
-
+
+
+
+
+ Vite App
+
+
+
+
+
diff --git a/vue-admin-wonderful-next/package.json b/vue-admin-wonderful-next/package.json
index 16077b7..9d00ec3 100644
--- a/vue-admin-wonderful-next/package.json
+++ b/vue-admin-wonderful-next/package.json
@@ -9,7 +9,8 @@
"vue": "^3.0.4"
},
"devDependencies": {
- "vite": "^1.0.0-rc.13",
- "@vue/compiler-sfc": "^3.0.4"
+ "@vue/compiler-sfc": "^3.0.4",
+ "typescript": "^4.1.2",
+ "vite": "^1.0.0-rc.13"
}
-}
\ No newline at end of file
+}
diff --git a/vue-admin-wonderful-next/shim.d.ts b/vue-admin-wonderful-next/shim.d.ts
new file mode 100644
index 0000000..d1f4e4d
--- /dev/null
+++ b/vue-admin-wonderful-next/shim.d.ts
@@ -0,0 +1,5 @@
+declare module "*.vue" {
+ import { Component } from "vue"
+ const component: Component
+ export default component
+}
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/shims.d.ts b/vue-admin-wonderful-next/shims.d.ts
deleted file mode 100644
index 314e3aa..0000000
--- a/vue-admin-wonderful-next/shims.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.vue' {
- import Vue from 'vue'
- export default Vue
-}
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/tsconfig.json b/vue-admin-wonderful-next/tsconfig.json
new file mode 100644
index 0000000..5dcbbbc
--- /dev/null
+++ b/vue-admin-wonderful-next/tsconfig.json
@@ -0,0 +1,70 @@
+{
+ "compilerOptions": {
+ /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+ /* Basic Options */
+ // "incremental": true, /* Enable incremental compilation */
+ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+ // "lib": [], /* Specify library files to be included in the compilation. */
+ // "allowJs": true, /* Allow javascript files to be compiled. */
+ // "checkJs": true, /* Report errors in .js files. */
+ // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+ // "declaration": true, /* Generates corresponding '.d.ts' file. */
+ // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
+ // "sourceMap": true, /* Generates corresponding '.map' file. */
+ // "outFile": "./", /* Concatenate and emit output to single file. */
+ // "outDir": "./", /* Redirect output structure to the directory. */
+ // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+ // "composite": true, /* Enable project compilation */
+ // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
+ // "removeComments": true, /* Do not emit comments to output. */
+ // "noEmit": true, /* Do not emit outputs. */
+ // "importHelpers": true, /* Import emit helpers from 'tslib'. */
+ // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+ // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+ /* Strict Type-Checking Options */
+ "strict": true, /* Enable all strict type-checking options. */
+ // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
+ // "strictNullChecks": true, /* Enable strict null checks. */
+ // "strictFunctionTypes": true, /* Enable strict checking of function types. */
+ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+ // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
+ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
+ // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
+
+ /* Additional Checks */
+ // "noUnusedLocals": true, /* Report errors on unused locals. */
+ // "noUnusedParameters": true, /* Report errors on unused parameters. */
+ // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+ // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+ // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
+
+ /* Module Resolution Options */
+ // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+ // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
+ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
+ // "typeRoots": [], /* List of folders to include type definitions from. */
+ // "types": [], /* Type declaration files to be included in compilation. */
+ // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+ "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+ // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
+ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
+
+ /* Source Map Options */
+ // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
+ // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
+ // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+ /* Experimental Options */
+ // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
+ // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
+
+ /* Advanced Options */
+ "skipLibCheck": true, /* Skip type checking of declaration files. */
+ "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+ }
+}
diff --git a/vue-admin-wonderful-next/vite.config.ts b/vue-admin-wonderful-next/vite.config.ts
index a7c8330..bdcd3df 100644
--- a/vue-admin-wonderful-next/vite.config.ts
+++ b/vue-admin-wonderful-next/vite.config.ts
@@ -1,5 +1,9 @@
-module.exports = {
- devServer: {
- open: true
- }
-}
\ No newline at end of file
+import type { UserConfig } from 'vite'
+
+const viteConfig: UserConfig = {
+ port: 8080,
+ hostname: 'localhost',
+ open: true
+}
+
+export default viteConfig