hualalaa-visual studio code-note two

项目的开始

1.
命令行cd 项目路径
然后运行代码npm run serve

PS D:\Adesk> cd D:\Adesk\first-exercise
PS D:\Adesk\first-exercise> npm run serve

用Chrome打开运行之后显示的网址，上面是本地打开，下面可以发给别人共同查看

2.
在vs里选择文件- -将文件夹添加到工作区–选择创建的那个文件

3.
vue-cli3需要新建一个叫vue.config.js的文件，放在主目录下，配置之后每次都要npm run serve才会生效（具体操作：1.在控制台按ctrl+c；2.选择y；3.输入npm run serve）。配置模板上网百度一个即可，看看官网有详细说明，然后需要什么就改什么。(关于webpack的配置也放一个网址，有需要可以自己查看填什么上去)

这里提供一个模板。

module.exports = {
  /* 部署应用包的基本URL */
  /* baseUrl 从 Vue CLI 3.3 起已弃用 ，请使用publicPath */
  //  baseUrl: process.env.NODE_ENV === "production" ? "./" : "./",
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  /* 生产环境构建文件的目录 defalut: dist */
  outputDir: "dist",
  /* 放置生成的静态文件目录（js css img） */
  assetsDir: "static",
  /* 指定生成的index.html 输出路径 相对 default: index.html */
  indexPath: "index.html",
  /* 指定生成文件名中包含hash default: true */
  filenameHashing: true,
  /* 是否保存时 lint 代码 */
  lintOnSave: process.env.NODE_ENV === "production",
  /* 是否使用编译器 default: false */
  runtimeCompiler: false,
  /* 默认babel-loader会忽略node_modules中的文件，你想显示的话在这个选项中列出来 */
  // transpileDependencies: [],
  /* 生产环境的source map */
  // 禁止console
  // drop_console: true,
  // 禁止debug语句
  // drop_debugger: true,
  productionSourceMap: true,
  // crossorigin: "",
  integrity: false,
  configureWebpack: {
    resolve: {
      alias: {
        assets: "@/assets",
        components: "@/components",
        views: "@/views"
      }
    }
  },
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      //sass: {
       // prependData: `@import"./src/styles/main.scss";`
     // }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  devServer: {
    port: 8080,
    host: "0.0.0.0",
    https: false,
    // 自动启动浏览器
    open: false,
    proxy: {
      "/api": {
        //代理路径 例如 https://baidu.com
        target: "http://192.168.0.106:8081",
        // 将主机标头的原点更改为目标URL
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

4.vue router定向有两种方法，其中第二种属于懒加载（就是用的时候才获取，可以增加性能）（还有一种叫重定向，格式为redirect: '/地址'）

重定向：

**5.**然后到这里就已经可以正式开始写自己的项目了。

记录bug

Delete `·`eslintprettier/prettier
const debug: boolean
已声明“debug”，但从未读取其值。ts(6133)
'debug' is assigned a value but never used.eslintno-unused-vars
速览问题 (Alt+F8)
快速修复... (Ctrl+.)

解决方法：
在同一行后面添加注释// eslint-disable-line no-unused-vars

 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (D:\Adesk\first-exercise\node_modules\schema-utils\dist\validate.js:96:11)
    at Object.loader (D:\Adesk\first-exercise\node_modules\sass-loader\dist\index.js:36:28)
    at D:\Adesk\first-exercise\node_modules\webpack\lib\NormalModule.js:316:20
    at D:\Adesk\first-exercise\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\Adesk\first-exercise\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at runSyncOrAsync (D:\Adesk\first-exercise\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (D:\Adesk\first-exercise\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at D:\Adesk\first-exercise\node_modules\loader-runner\lib\LoaderRunner.js:186:6
    at context.callback (D:\Adesk\first-exercise\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\Adesk\first-exercise\node_modules\cache-loader\dist\index.js:240:7
    at D:\Adesk\first-exercise\node_modules\neo-async\async.js:2830:7
    at done (D:\Adesk\first-exercise\node_modules\neo-async\async.js:2865:11)
    at D:\Adesk\first-exercise\node_modules\neo-async\async.js:2818:7
    at D:\Adesk\first-exercise\node_modules\cache-loader\dist\index.js:229:9
    at D:\Adesk\first-exercise\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

解决方法：原因是vue-cli版本更新造成的，把vue.config.js文件中的data改为prependData即可；

本文地址：https://blog.csdn.net/weixin_43809506/article/details/107360476