Day11-NUXT介绍及环境初始化-p166

}],

‘jsx-quotes’: [2, ‘prefer-single’],

‘key-spacing’: [2, {

‘beforeColon’: false,

‘afterColon’: true

}],

‘keyword-spacing’: [2, {

‘before’: true,

‘after’: true

}],

‘new-cap’: [2, {

‘newIsCap’: true,

‘capIsNew’: false

}],

‘new-parens’: 2,

‘no-array-constructor’: 2,

‘no-caller’: 2,

‘no-console’: ‘off’,

‘no-class-assign’: 2,

‘no-cond-assign’: 2,

‘no-const-assign’: 2,

‘no-control-regex’: 2,

‘no-delete-var’: 2,

‘no-dupe-args’: 2,

‘no-dupe-class-members’: 2,

‘no-dupe-keys’: 2,

‘no-duplicate-case’: 2,

‘no-empty-character-class’: 2,

‘no-empty-pattern’: 2,

‘no-eval’: 2,

‘no-ex-assign’: 2,

‘no-extend-native’: 2,

‘no-extra-bind’: 2,

‘no-extra-boolean-cast’: 2,

‘no-extra-parens’: [2, ‘functions’],

‘no-fallthrough’: 2,

‘no-floating-decimal’: 2,

‘no-func-assign’: 2,

‘no-implied-eval’: 2,

‘no-inner-declarations’: [2, ‘functions’],

‘no-invalid-regexp’: 2,

‘no-irregular-whitespace’: 2,

‘no-iterator’: 2,

‘no-label-var’: 2,

‘no-labels’: [2, {

‘allowLoop’: false,

‘allowSwitch’: false

}],

‘no-lone-blocks’: 2,

‘no-mixed-spaces-and-tabs’: 2,

‘no-multi-spaces’: 2,

‘no-multi-str’: 2,

‘no-multiple-empty-lines’: [2, {

‘max’: 1

}],

‘no-native-reassign’: 2,

‘no-negated-in-lhs’: 2,

‘no-new-object’: 2,

‘no-new-require’: 2,

‘no-new-symbol’: 2,

‘no-new-wrappers’: 2,

‘no-obj-calls’: 2,

‘no-octal’: 2,

‘no-octal-escape’: 2,

‘no-path-concat’: 2,

‘no-proto’: 2,

‘no-redeclare’: 2,

‘no-regex-spaces’: 2,

‘no-return-assign’: [2, ‘except-parens’],

‘no-self-assign’: 2,

‘no-self-compare’: 2,

‘no-sequences’: 2,

‘no-shadow-restricted-names’: 2,

‘no-spaced-func’: 2,

‘no-sparse-arrays’: 2,

‘no-this-before-super’: 2,

‘no-throw-literal’: 2,

‘no-trailing-spaces’: 2,

‘no-undef’: 2,

‘no-undef-init’: 2,

‘no-unexpected-multiline’: 2,

‘no-unmodified-loop-condition’: 2,

‘no-unneeded-ternary’: [2, {

‘defaultAssignment’: false

}],

‘no-unreachable’: 2,

‘no-unsafe-finally’: 2,

‘no-unused-vars’: [2, {

‘vars’: ‘all’,

‘args’: ‘none’

}],

‘no-useless-call’: 2,

‘no-useless-computed-key’: 2,

‘no-useless-constructor’: 2,

‘no-useless-escape’: 0,

‘no-whitespace-before-property’: 2,

‘no-with’: 2,

‘one-var’: [2, {

‘initialized’: ‘never’

}],

‘operator-linebreak’: [2, ‘after’, {

‘overrides’: {

‘?’: ‘before’,

‘:’: ‘before’

}

}],

‘padded-blocks’: [2, ‘never’],

‘quotes’: [2, ‘single’, {

‘avoidEscape’: true,

‘allowTemplateLiterals’: true

}],

‘semi’: [2, ‘never’],

‘semi-spacing’: [2, {

‘before’: false,

‘after’: true

}],

‘space-before-blocks’: [2, ‘always’],

‘space-before-function-paren’: [2, ‘never’],

‘space-in-parens’: [2, ‘never’],

‘space-infix-ops’: 2,

‘space-unary-ops’: [2, {

‘words’: true,

‘nonwords’: false

}],

‘spaced-comment’: [2, ‘always’, {

‘markers’: [‘global’, ‘globals’, ‘eslint’, ‘eslint-disable’, ‘*package’, ‘!’, ‘,’]

}],

‘template-curly-spacing’: [2, ‘never’],

‘use-isnan’: 2,

‘valid-typeof’: 2,

‘wrap-iife’: [2, ‘any’],

‘yield-star-spacing’: [2, ‘both’],

‘yoda’: [2, ‘never’],

‘prefer-const’: 2,

‘no-debugger’: process.env.NODE_ENV === ‘production’ ? 2 : 0,

‘object-curly-spacing’: [2, ‘always’, {

objectsInObjects: false

}],

‘array-bracket-spacing’: [2, ‘never’]

}

}

5.1、！！！！！！！！！！注意！！！！！！！！安装ESLint可以严格规范代码编写格式，但其规则过于严格，安装后容易出现警告，如果不想使用ESLint可以跳过步骤5，即不用替换下面代码）

（1）首先删除代码不要进行替换。

（2）注释掉下面代码

（3）.eslintrc.js中的文件不要替换

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210327103825258.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTEyM

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

jc0,size_16,color_FFFFFF,t_70)

6、打开package.json文件，修改以下内容

---

“name”: “haha”,

“version”: “1.0.0”,

“description”: "在线教育前台网站 ",

“author”: “Hello 123@qq.com”,

7、打开nuxt.config.js文件

---

修改title: ‘{{ name }}’、content: ‘{{escape description }}’

这里的设置最后会显示在页面标题栏和meta数据中

head: {

title: ‘哈哈学院 - Java视频|HTML5视频|前端视频|Python视频|大数据视频-自学拿1万+月薪的IT在线视频课程，粉丝力挺，老学员为你推荐’,

meta: [

{ charset: ‘utf-8’ },

{ name: ‘viewport’, content: ‘width=device-width, initial-scale=1’ },

{ hid: ‘description’, name: ‘description’, content: ‘哈哈学院是国内领先的IT在线视频学习平台、职业教育平台。截止目前,哈哈学院线上、线下学习人次数以万计！会同上百个知名开发团队联合制定的Java、HTML5前端、大数据、Python等视频课程，被广大学习者及IT工程师誉为：业界最适合自学、代码量最大、案例最多、实战性最强、技术最前沿的IT系列视频课程！’ }

],

link: [

{ rel: ‘icon’, type: ‘image/x-icon’, href: ‘/favicon.ico’ }

]

},

在命令提示终端中进入项目（vue-front-1010）目录

8、安装依赖

---

npm install

11、测试运行

---

12、浏览器访问链接，出现如下界面证明环境初始化成功

---

访问链接：http://localhost:3000/

三、NUXT目录结构

=========================================================================

（1）资源目录 assets

用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

（2）组件目录 components

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。