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打开运行之后显示的网址,上面是本地打开,下面可以发给别人共同查看
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
上一篇: Effective C++ 55个条款
下一篇: 黑客实战录之对防火墙机器的渗透