欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

hualalaa-visual studio code-note two

程序员文章站 2022-06-22 19:44:42
打开新项目1.命令行cd 项目路径然后运行代码npm run servePS D:\Adesk> cd D:\Adesk\first-exercisePS D:\Adesk\first-exercise> npm run serve用Chrome打开运行之后显示的网址,上面是本地打开,下面可以发给别人共同查看2.在vs里选择文件–将文件夹添加到工作区–选择创建的那个文件......

项目的开始

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

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

用Chrome打开运行之后显示的网址,上面是本地打开,下面可以发给别人共同查看
hualalaa-visual studio code-note two
2.
在vs里选择文件- -将文件夹添加到工作区–选择创建的那个文件

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

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: '/地址'
hualalaa-visual studio code-note two
重定向:
hualalaa-visual studio code-note two
**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