CrazyAirhead

疯狂的傻瓜,傻瓜也疯狂——傻方能执著,疯狂才专注!

0%

VUE踩坑记-02

背景

上一篇说到使用vue-element-admin来做后端管理,经同事的介绍可以使用Muse-ui来做前端应用。查看了Muse的官网后,准备踩坑下。

快速入门

在Github上看到MuseUI的模板nuxt-template

1
2
3
4
vue init museui/nuxt-tempalte myproject
cd my-project
yarn instll
yarn run dev

一切看起来很美好,http://localhost:3000可直接看页面了。

Nuxt.js

一看源码,连App.vue都没有,刚有点基础的我慌了。赶紧查查是什么?

简单点说Nuxt.js是一个基于Vue.js的通用应用框架,重点关注应用的UI渲染(支持客户端和服务端渲染),另外它像Maven一样规定了项目的目录结构,对于初学者来说,看懂文档,还是相对容易创建一个新的项目的。这里有它的文档,可以自行了解。

将项目转成TypeScript

之前说过,ts更接近java,为了统一,我准备将项目转换成ts的,顺便多熟悉下Nuxt。

创建

1
mkdir myproject2

用VSCode打开空目录,myproject2

新建package.json文件

package.json 文件用来设定如何运行 nuxt:

1
2
3
4
5
6
{
"name": "myproject2",
"scripts": {
"dev": "nuxt"
}
}

安装Nux

1
yarn add nuxt

pages目录

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

创建 pages 目录:

1
mkdir pages

创建我们的第一个页面 pages/index.vue

1
2
3
<template>
<h1>Hello world!</h1>
</template>

启动

1
yarn run dev

此时我们的应用运行在 http://localhost:3000 上运行。

支持TypeScript

为了能够在项目中使用TypeScript,您需要将@nuxt/typescriptts-node作为开发依赖项安装:

1
2
yarn add -D @nuxt/typescript
yarn add ts-node

需要创建一个空的tsconfig.json文件,tsconfig.json文件将在您第一次运行nuxt命令时使用默认值自动更新。

1
touch tsconfig.json

配置文件

为了能够在配置文件中使用TypeScript,您只需要将nuxt.config.js重命名为nuxt.config.ts

使用ESLint

1
yarn add -D @typescript-eslint/eslint-plugin

然后,通过添加@typescript-eslint插件并使@typescript-eslint/parser作为默认解析器来编辑ESLint配置(.eslintrc.js)。

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
plugins: ['@typescript-eslint'],
parserOptions: {
parser: '@typescript-eslint/parser'
},
extends: [
'@nuxtjs'
],
rules: {
'@typescript-eslint/no-unused-vars': 'error'
}
}

最后,添加或编辑package.jsonlint脚本:

1
"lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."

使用MuseUI

拷贝pages文件

将myproject下的about.vue和index.vue拷到pages下

拷贝plugins文件

将myproject下的muse-ui.js拷贝过来并重命名为muse-ui.ts

修改配置文件

nuxt.config.js拷贝过来重命名为nuxt.config.ts。其中去掉eslint的相关配置。修改vendor为

1
2
3
vendor: [
'~/plugins/muse-ui'
]

问题

此时通过yarn run dev已经可正常编译,但运行时会页面会提示错误。大致错误

1
2
3
4
5
6
SyntaxError
Invalid or unexpected token

vm.js
Missing stack framesJS
new [email protected]:7

查官网issues,说是还不支持ssr,调整plugins配置就可以了。

1
2
3
4
5
6
plugins: [
{
src: '~plugins/muse-ui',
ssr: false
}
]

最终的nuxt.config.ts文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'myproject2',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js Muse-UI project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
plugins: [
{
src: '~plugins/muse-ui',
ssr: false
}
],
/*
** Build configuration
*/
build: {
babel: {
plugins: [
['import', {
libraryName: 'muse-ui',
libraryDirectory: 'lib',
camel2DashComponentName: false
}]
]
},
vendor: [
'~/plugins/muse-ui'
],
extractCSS: true
}
}

经过以上的修改已经可以通过nuxt来管理vue项目,并能过ts来写代码了。

欢迎关注我的其它发布渠道