Forráskód Böngészése

更新脚手架配置

kindring 3 éve
szülő
commit
0b6dcf9ffb
1 módosított fájl, 46 hozzáadás és 46 törlés
  1. 46 46
      vue/vue脚手架配置.md

+ 46 - 46
vue/vue脚手架配置.md

@@ -1,52 +1,51 @@
 # vue脚手架的基础配置
 ## 1. *配置路径别名*
-   >从网上找的方法,网上还有另外一种配置方法,但是没法用
-   + 在根目录下找到 `vue.config.js` 文件
-        >如果没有此文件可以直接去找其他教程,或者是找尝试自己创建一个,免得浪费时间
-   + 在 `vue.config.js` 文件中加入如下代码
-        > 
-        ``` 
-        let path = require('path');
-        function resolve(dir) {
-            console.log(dir);
-            return path.join(__dirname, dir);
-        }
-        let c = {
-            configureWebpack: {
-                resolve: {
-                    extensions: ['.js', '.vue', '.json'],
-                    alias: {
-                        '@components': resolve('src/components'),
-                        '@': resolve('src')
-                    }
-                },
-
-            },
-        }
-        module.exports = c;
-        ```
-        > 这个文件是一个js文件,他需要导出一个配置的对象结构,他把这个js文件给当成配置文件用了,一个高级的json文件。这里导入了path模块使用__dirname进行路径拼接,alias属性里面前面的值对应的是要设置的别名,后面使用resolve方法拼接路径,可以替换成其他的路径
-    + 在组件中使用
-        ```
-        import H from '@components/HelloWorld.vue'
-        import b from '@request/api';
-        ```
+>从网上找的方法,网上还有另外一种配置方法,但是没法用
++ 在根目录下找到 `vue.config.js` 文件
+>如果没有此文件可以直接去找其他教程,或者是找尝试自己创建一个,免得浪费时间
++ 在 `vue.config.js` 文件中加入如下代码
+    
+``` 
+let path = require('path');
+function resolve(dir) {
+    console.log(dir);
+    return path.join(__dirname, dir);
+}
+let c = {
+    configureWebpack: {
+        resolve: {
+            extensions: ['.js', '.vue', '.json'],
+            alias: {
+                '@components': resolve('src/components'),
+                '@': resolve('src')
+            }
+        },
+    },
+}
+module.exports = c;
+```
+> 这个文件是一个js文件,他需要导出一个配置的对象结构,他把这个js文件给当成配置文件用了,一个高级的json文件。这里导入了path模块使用__dirname进行路径拼接,alias属性里面前面的值对应的是要设置的别名,后面使用resolve方法拼接路径,可以替换成其他的路径
++ 在组件中使用
+```
+import H from '@components/HelloWorld.vue'
+import b from '@request/api';
+```
 ## 2. 设置服务器启动端口
 > 配置vue的启动端口
-  + 依旧是在 `vue.config.js` 中进行配置,依旧是返回的对象.加上如下代码
-    > 
-    ``` 
-    devServer: {
-        open: process.platform === 'darwin',
-        host: '127.0.0.1',
-        port: 2333,
-        https: false,
-        hotOnly: false,
-        proxy: null, // 设置代理
-        before: app => {}
-    }
-    ```
-   + 重新启动服务,可以发现端口已经被修改成了2333
++ 依旧是在 `vue.config.js` 中进行配置,依旧是返回的对象.加上如下代码
+> 
+``` 
+devServer: {
+    open: process.platform === 'darwin',
+    host: '127.0.0.1',
+    port: 2333,
+    https: false,
+    hotOnly: false,
+    proxy: null, // 设置代理
+    before: app => {}
+}
+```
++ 重新启动服务,可以发现端口已经被修改成了2333
 ## 3. 配置mockjs
 > 这一步浪费了挺多时间的,过于傻逼,可能早已经配置好了结果自己写错了路径,导致找了大量资料,方法不一定适用所有的
   + 引入mockjs
@@ -87,5 +86,6 @@
 + 在根目录的 `package.json` 里面找到 `eslintConfig` ,添加或者找到 `rules` 字段,添加或者设置 `"no-unused-vars":"off"` 即可正常关闭
 + 后续等待更新
 ## 5. 全局注册Antd组件
-  + 在main.js的入口中导入antd模块,然后挂载在vue中
+> [!tip]
+> 可以参考[vue3配置ant](../vue/vue3_Ant框架.md)