时间:2021-05-26
脚手架安装好nuxt的基本项目
npx create-nuxt-app <项目名>,如:npx create-nuxt-app nuxt-ts,按照提示安装你想要的东西,本次项目预装: Universal模式下koa+PWA+linter+prettier+axios ,默认的项目目录如下:
eslint + prettier + vscode 保存自动格式化&修复
本人习惯缩进为4个空格,但是eslint&nuxt生成的项目默认为2个,因此需要更改配置
.prettierrc文件
{ "singleQuote": true, // 使用单引号 `.vscode/settings.json` 的`prettier.semi` "semi": false, // 结尾不加分号 `.vscode/settings.json` 的`prettier.semi` "printWidth": 120 // 此项为我自加以上两项为默认,表示每行最多显示的字符数,默认为80,本人觉得太短了,因此修改了一下,必须与`.vscode/settings.json` 的`prettier.printWidth`对应上}.eslintrc.js文件配置
module.exports = { root: true, env: { browser: true, node: true }, parserOptions: { parser: 'babel-eslint' }, extends: [ '@nuxtjs', 'plugin:nuxt/recommended', 'plugin:prettier/recommended', 'prettier', 'prettier/vue' ], plugins: ['prettier'], // add your custom rules here rules: { 'nuxt/no-cjs-in-config': 'off', indent: ['error', 4] // 4个空格缩进 }}nuxt.config.js文件下 build.extend(config, ctx) {}添加options.fix: true
build: { /* ** You can extend webpack config here */ extend(config, ctx) { // Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/, options: { fix: true } }) } } }开始改造工程支持typescript
安装所需插件
修改&添加配置
package.json
添加或编辑package.json的lint脚本:
"lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
修改package.json 的 dev 脚本中 server/index.js 为 server/index.ts
"dev": "cross-env NODE_ENV=development nodemon server/index.ts --watch server",tsconfig.json
项目目录下新建tsconfig.json文件后,在package.json文件下添加:
"start-dev": "nuxt" 脚本命令,运行npm run dev就会使用默认值自动更新此配置文件
.eslintrc.js
修改.eslintrc.js文件 parserOptions.parser: '@typescript-eslint/parser'
parserOptions: { parser: '@typescript-eslint/parser'},修改.eslintrc.js文件 plugins添加'@typescript-eslint'
plugins: ['prettier', '@typescript-eslint'],nuxt.config.js
修改nuxt.config.js文件后缀为 nuxt.config.ts
修改nuxt.config.ts的build.extend
{ test: /\.ts$/, exclude: [/node_modules/, /vendor/, /\.nuxt/], loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/], transpileOnly: true }}server/index.js
修改server/index.js文件后缀为 server/index.ts
修改server/index.ts中的
const config = require('../nuxt.config.js')// 为const config = require('../nuxt.config.ts')修改vue文件为typescript语法
<script>import Logo from '~/components/Logo.vue'export default { components: { Logo }}</script>typescript 语法如下:
<script lang="ts">import { Component, Vue } from 'vue-property-decorator'import Logo from '~/components/Logo.vue'@Component({ components: { Logo }, middleware: 'check-auth'})export default class IndexPage extends Vue {}</script>坑点
vetur 报错 Cannot find module 'xxxx'
解决方案:import 路径 需要写清楚后缀
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
webpack中eslint使用首先,要使webpack支持eslint,就要要安装eslint-loader,命令如下:npminstall--save-de
Nuxt使用create-nuxt-app创建项目时,选择使用Element-UI为默认组件库,发现Nuxt没有开启Element-UI的按需引入配置,需要自行
TypeScript和JavaScript是目前项目开发中较为流行的两种脚本语言,typescript和js的区别: 1、TypeScript可以使用Java
Nuxt.js是Vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方便的搭建一个支持SSR的VUE项目。Eleme
TypeScript是JavaScript的一个超集,支持ECMAScript6标准。TypeScript由微软开发的自由和开源的编程语言。TypeScript