Vue2.搭建工程

Vue2.搭建工程

###　一、项目初始化：vue init webpack mt-app

// 1、项目名称
? Project name (mt-app)

// 2、项目描述
? Project description (A Vue.js project)

// 3、 作者名
Author (nature <18312524948@163.com>)

// 4、选择那一种压缩
Vue build (Use arrow keys)
Runtime + Compiler: recommended for most users

// 5/ 下载vue-router
Install vue-router? (Y/n)

// 6、用ESLint 规范代码
? Use ESLint to lint your code? (Y/n)y

// 7、选择ESLint预设-->标准的
Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)

// 8、构造一个测试的项目
? Set up unit tests (Y/n) n

// 9、使用Nightwatch设置e2e测试
? Setup e2e tests with Nightwatch? (Y/n) n

// 10、下载依懒时用那个工具
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

Vue/配置文件说明

文件说明

README.md 项目说明，**

1、package.json 项目所有依懒:

a、“devDependencies” ：开发环境用的依懒；b、“dependencies”: 生产环境用的依懒

2、package-lock。json 对 package.json 详细的说明

3、index.html 最后要渲染到这个页面 **

4、.postcssrc.js 对 css 预处理的配置文件

5、.gitignore 项目上传到 github.com 所省略的文件: .DS_Store->webpack 的文件，node_modules, /dist/打包的目录

6、.eslintrc.js 代码规范的文件–>它的目标是提供一个插件化的 javascript 代码检测工具。:https://eslint.bootcss.com/

7、.eslintignore: .eslintrc.js 代码规范的文件

8、.editorconfig: .eslintrc.js 代码配置

9、.babelrc 识别代码、配置环境

10、文件 build.js 构建一些配置

11、webpack.base.config.js 必须要看懂（开发和生产都用的配置文件）

12、vue-loader.conf.js vue 文件的配置文件

配置文件

在 webpack.base.conf.js

配置：  {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
      }
下载依懒：npm install style-loader css-loader sass-loader node-sass -D

二、创建项目：vue create + 名称

选择预设–选择其他依懒包文件–第二个选择依懒更多
–依懒 Babel 包(把 vue 转 js,把 es6 转 Es5 等等)–把配置放哪里
–保存这个预置给未来的项目–起名字 only-babel–下载所有依懒的包

0、vue create .

<!-- ? 是否在当前目录中生成项目？（是/否） -->
? Generate project in current directory? (Y/n)

1、请选择预设：（使用箭头键）
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features

2、检查项目所需的功能：
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

3、选择要启动项目的Vue.js版本
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x

4、路由器是否使用历史模式
 Use history mode for router? (Requires proper server setup for index fallback in production) Yes

5、选择一个CSS预处理器
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less


6、选择一个linter/formatter配置
ESLint with error prevention only
> ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

7、
Pick additional lint features:
 Lint on save

8、您喜欢将Babel、ESLint等的配置放在哪里。？
 Where do you prefer placing config for Babel, ESLint, etc.?
 In package.json

9、是否将此保存为将来项目的预设(是/否）
Save this as a preset for future projects? (y/N)n


开启项目
cd duyi-vue  进入文件中
npm run serve 开启服务

//模板
//el $mount
//template  el.outerHTML


// 完整版
// 运行时版(脚手架)(少了编译器，体积小30% )  最大程度上使用js的编程能力


// h === createElement
// render函数会接收一个参数h,返一个h调用的结果,

h()第一个参数可以是一个组件配置对象,或者字符串的标签名(必需)
   第二个参数是与模板中属性对应的数据对象，(可选)
    第三个对参数是子级的虚拟节点(可选)

            render(h) {
                return h('a');
            }

        // h-->createElement

报错

1、

TypeError: this.getOptions is not a function at Object.lessLoader 问题 **

代码规范:

 在package.js
"scripts": {
    "lint": "eslint --fix --ext .js,.vue src",   //此项加--fix
  },

在。eslintrc.js
  plugins: [
    'vuefix'
  ],
要下载下：npm install eslint-plugin-vuefix  -D

2

webpack路径别名引发ESLint报错
Unable to resolve path to module ‘***‘

1.安装 eslint-import-resolver-webpack

2.在.eslinttrc.js中配置
-->在node_modules-->.bin-->.eslintrc.js

场景复原，例如平时我们在 webpack 中设置了这样的一个别名路径：
alias:{
  components: path.resolve(__dirname, "src", "components")
}
然后我们使用别名去加载模块路径：
Import  NewsFeed  from  'components/NewsFeed'

但是在执行 ESLint 校验之后，会报错：
Unable to resolve path to module ‘components/NewsFeed’。
问题解决：eslint-import-resolver-webpack 插件的使用

首先安装依赖：
npm install eslint-import-resolver-webpack --save-dev
Yarn add eslint-import-resolver-webpack --save-dev

加入代码：

module.exports = {
 root: true,
 'settings': {
   "import/resolver": {
     "webpack": {
     	//此处config对应webpack.config.js的路径，我这个路径是vue-cli3默认的路径
       "config": "node_modules/@vue/cli-service/webpack.config.js"
     }
   }
 }
}

1.此时引入问题已解决，但是需要引入文件加上后缀名，如果想忽略后缀名，可以继续在eslint配置文件中这样：
rules: { 'import/extensions': ['error', 'always', { 'js': 'never', 'vue': 'never' }] }

3

TypeError: this.getOptions is not a function 的解决

一、问题的出现：
在进行 react 项目开发的时候，出现了这个错误，TypeError: this.getOptions is not a function，如下所示：

二. 问题的分析及解决：
问题的分析：这个实际上就是 less-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理
问题的解决：通过 npm uninstall less-loader 命令卸载原版本的 less-loader，然后 通过 npm install less-loader@5.0.0 命令下载降级版本的 less-loader，这个问题就可以解决了


也就是安装的插件版本高了，要降级

4

自动修复 npm run lint

步骤如下：

① 打开 package.json，在 script 里找到

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5IVQG5T-1661087503006)(E:\Duyidu\要背的知识\01\assets\03.png)]

修改为：（中间插入–fix）

lint": “eslint --fix --ext .js,.vue src test/unit”，

2、终端运行 npm run lint 修改代码样式

3、最后终端运行 npm run dev 就不会报 ESLint 错误了。

安装到开发环境： npm axios --save-dev -->查看 package.json : dependences

安装到生产环境： npm axios --save -->查看 package.json : devDependences

下载插件：eslint-plugin-vuefix

$ npm i eslint -D

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --fix --ext .js,.vue src",
"build": "node build/build.js"
},

vant
插件：https://vant-contrib.gitee.io/vant/#/zh-CN/

-S : --save

-D: devDependencies

css 的引入

<style lang="less" scoped>
    @import url ("~@/assets/home.less");
</style>

图片引项目的三种方法

<template>
    <div class="hello">
    // 第一种
        <img src="../assets/logo.png"
             alt="">
        <img :src="imgSrc1"
             alt="">
        <img :src="imgSrc2"
             alt="">

        <section :style="{backgroundImage: 'url('+imgSrc1+')'}"></section>
        <section :style="{backgroundImage: 'url('+imgSrc2+')'}"></section>
    </div>
</template>

<script>
    // 第二种
import imgSrc from '../assets/logo.png'
export default {
    name: 'HelloWorld',
    data() {
        return {
            // 第三种
            imgSrc1: require('../assets/logo.png'),
            imgSrc2: imgSrc,
        }
    },
}
</script>

<style scoped>
section {
    width: 200px;
    height: 200px;
}
</style>

环境变量的配置

.env.dev

NODE_ENV=development //指定这个份文件在开发环境下使用
VUE_APP_BASE_URL=/

.env.prod

NODE_ENV = production //指定这个份文件在生产环境下使用
VUE_APP_BASE_URL = ‘http://codesohigh.com’

环境变量的使用

process.evn + 变量名
eg:
process.env.NODE_ENV

###　关闭 ESLint

1、在 vue.config.js 文件中 lintOnSave: false

或者 2、在.eslintrc.js 文件中找到’@vue/standard’配置将其删除或注释。