纹身网站建设案例,泉州百度网站快速优化,网站免费正能量直接进入老狼,多语言网站建设推广零. 前言 公司最近开发项目使用的是vue-cli 3.0版本开发#xff0c;但是对于vue-cli 3.0版本一直没有研究过如何使用#xff0c;公司使用配置#xff1a;pug ts stylus eslint#xff1b;编辑器使用#xff1a;vscode#xff0c;使用起来简直不要太爽。 默认你已经安装… 零. 前言 公司最近开发项目使用的是vue-cli 3.0版本开发但是对于vue-cli 3.0版本一直没有研究过如何使用公司使用配置pug ts stylus eslint编辑器使用vscode使用起来简直不要太爽。 默认你已经安装了nodejs 一.安装vue-cli 3.0 1.安装 npm install -g vue/cli-g 全局安装 vue-cli二.创建项目 1.创建vue-app项目 vue create vue-app2.项目配置 默认配置手动配置babel ts 预编译 等等… 【选择这个】以下是我选择的配置可以直接按数字键1,2,3,4进行选择 Babel将ES6编译成ES5TypeScriptJS超集主要是类型检查Router和Vuex路由和状态管理Linter/ Formatter代码检查工具CSS Pre-processorscss预编译 (稍后会对这里进行配置)Unit Testing单元测试开发过程中前端对代码进行自运行测试Use class-style component syntax? (Y/n) y是否使用Class风格装饰器 即原本是home new Vue()创建vue实例 使用装饰器后class home extends Vue{} Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y使用Babel与TypeScript一起用于自动检测的填充? yes Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面 使用什么css预编译器 我选择的 stylus tslint: typescript格式验证工具eslint w...: 只进行报错提醒 【选这个】eslint A...: 不严谨模式eslint S...: 正常模式eslint P...: 严格模式 代码检查方式我选择保存时检查  单元测试工具这里附上vue单元测试的链接想了解的小伙伴戳这里 https://vue-test-utils.vuejs.org/zh/ vue-cli 一般来讲是将所有的依赖目录放在package.json文件里 Save this as a preset for future projects? (y/N) n是否在以后的项目中使用以上配置不 下载依赖的工具使用 yarn速度快。 到此为止安装就完成了可以等待安装成功。 三.使用 1.vscode的eslint配置使代码能够在ctrls的时候自动格式化 在vue-app目录县新建文件夹.vscode文件再在.vscode目录下新建settings.json文件内容如下 tips此配置包含了.vue文件.styl文件typescript的代码缩进 {prettier.printWidth: 160,prettier.tabWidth: 2,prettier.semi: false,prettier.singleQuote: true,prettier.disableLanguages: [],editor.tabSize: 2,[vue]: {editor.formatOnSave: true},[typescript]: {editor.formatOnSave: true,},[stylus]: {editor.formatOnSave: true,},stylusSupremacy.insertColons: false,stylusSupremacy.insertSemicolons: false,stylusSupremacy.insertBraces: false,languageStylus.useSeparator: false,
}这样做表示vscode在读取到vue-app项目是回去查找.vscode下的settings.json配置并应用。必须禁用插件eslint2.使用pug yarn add pug pug-plain-loader --dev使用yarn安装 pug 和 pug-plain-loader没有yarn的自行百度安装--dev安装到开发环境使用打开App.vue文件将文件修改为下面这样既可。template langpug#app#navrouter-link(to/) Homerouter-link(to/about) Aboutrouter-view/div
/template四、常见的一些问题 0.其他一些eslint配置都可以在packge.json文件中的eslintConfig下的rules下配置 1.console.log(1)报错 找到packge.json文件中的eslintConfig下的rules no-console: off参考文献 安装eslint配置 转载于:https://www.cnblogs.com/wenwenwei/p/10017843.html
