配置安装相关

yarn 升级

• npm uninstall -g yarn && npm install -g yarn

git 获取本地代码

假如说分支为 dev

1，git clone [email protected]:xxx/xxx.git

2，git fetch origin dev


3，git checkout -b dev origin/dev
y

4，git pull origin dev




1，git clone -b 分支名称 [email protected]:xxx/xxx.git
// 下载分支

2.git pull 
// 更新

//添加全部
git add .

//提交全部
git commit -m '更新日志'

//提交到服务器
git push origin dev

环境变量的概念

环境变量就是操作系统提供的系统级别用于存储变量的地方

• Windows中环境变量分为系统变量和用户变量
• 环境变量的变量名是不区分大小写的
• 特殊值：
  • PATH 变量：只要添加到 PATH 变量中的路径，都可以在任何目录下搜索

Windows下常用的命令行操作

• 切换当前目录（change directory）：cd
• 创建目录（make directory）：mkdir
• 查看当前目录列表（directory）：dir
  • 别名：ls（list）
• 清空当前控制台：cls
  • 别名：clear
• 删除文件：del
  • 别名：rm

注意：所有别名必须在新版本的 PowerShell 中使用

下载，安装

• cnpm 安装命令

   npm install -g cnpm --registry=https://registry.npm.taobao.org

• 查看版本

   cnpm -v

• npm就自动为我们更新到最新版本

npm install -g npm

npm常用命令

详细链接： https://www.cnblogs.com/itlkNote/p/6830682.html

• npm是什么
• npm install 安装模块
• npm uninstall 卸载模块
• npm update 更新模块
• npm outdated 检查模块是否已经过时
• npm ls 查看安装的模块
• npm init 在项目中引导创建一个package.json文件
• npm help 查看某条命令的详细帮助
• npm root 查看包的安装路径
• npm config 管理npm的配置路径
• npm cache 管理模块的缓存
• npm start 启动模块
• npm stop 停止模块
• npm restart 重新启动模块
• npm test 测试模块
• npm version 查看模块版本
• npm view 查看模块的注册信息
• npm adduser 用户登录
• npm publish 发布模块
• npm access 在发布的包上设置访问级别
• npm package.json的语法

SourceTree 跳过注册

• %LocalAppData%\Atlassian\SourceTree\ 文件夹地址

accounts.json
[
  {
    "$id": "1",
    "$type": "SourceTree.Api.Host.Identity.Model.IdentityAccount, SourceTree.Api.Host.Identity",
    "Authenticate": true,
    "HostInstance": {
      "$id": "2",
      "$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountInstance, SourceTree.Host.AtlassianAccount",
      "Host": {
        "$id": "3",
        "$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountHost, SourceTree.Host.AtlassianAccount",
        "Id": "atlassian account"
      },
      "BaseUrl": "https://id.atlassian.com/"
    },
    "Credentials": {
      "$id": "4",
      "$type": "SourceTree.Model.BasicAuthCredentials, SourceTree.Api.Account",
      "Username": "",
      "Email": null
    },
    "IsDefault": false
  }
]

二、打开webpack.base.config.js在loaders里面加上

rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }

三、在.vue文件中

vue-cli 3.0

• yarn add pug-html-loader pug-plain-loader
• 在vue.config.js中添加

	chainWebpack: config => {

		config.module
			.rule('pug')
			.test(/\.pug$/)
			.use('pug-html-loader')
			.loader('pug-html-loader')
			.end();
	}

vue 3.0以下 webpack 打包 DllPlugin & DllReferencePlugin

https://www.cnblogs.com/macq/p/8330316.html

Dll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。

打包dll的时候，Webpack会将所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了。

一、在项目build文件夹下新增文件webpack.dll.conf.js，内容如下

• 内容如下

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: {
    vendor: [  //  这里填写需要的依赖库
      'babel-polyfill',
      'axios',
      'vue/dist/vue.common.js',
      'vue-router',
      'pingpp-js',
      "region-picker"
    ]
  },
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      libraryTarget: 'commonjs2',
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

二、在webpack.prod.conf.js文件里插件部分添加：

plugins: [
  ...
  // copy custom static assets
    new webpack.DllReferencePlugin({
       context: path.resolve(__dirname, '..'),
       manifest: require('./vendor-manifest.json')
    })
]

三、在项目根目录index.html文件中添加：

    

    
         //添加这句，路径可根据所需修改

四、在package.json里打包dll添加命令

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


"build:dll": "webpack --config build/webpack.dll.conf.js"

命令顺序

npm run build:dll //打包一次之后依赖库无变动不需要执行

npm run build

优点

Dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。

App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。

假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。

VSCODE编辑器

• 公司的配置

    "workbench.iconTheme": "vscode-icons",
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "explorer.confirmDelete": false,
    "window.zoomLevel": 0,
    "files.associations": {
        "*.wxml": "html"
    },
    "editor.detectIndentation": false,
    "cssrem.rootFontSize": 23.4375,
    "[yaml]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 4,
        "editor.autoIndent": false
    },
    "editor.renderWhitespace": "all",
    "prettier.tabWidth": 4,
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "vetur.format.defaultFormatter.js": "vscode-typescript",

• 空格配置（格式化）

    "editor.tabSize": 4,
    "editor.renderWhitespace": "all",
    "editor.detectIndentation": false,

    "prettier.tabWidth": 4,
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "vetur.format.defaultFormatter.js": "vscode-typescript",

• cssrem插件

"cssrem.rootFontSize": 23.4375,

• 公司使用插件

* vscode-icons

* Vue 2 Snippets

* language-stylus

* Chinese (Simplified) Language Pack for Visual Studio Code
(适用于 VS Code 的中文（简体）语言包)

* vscode wxml
(微信小程序 wxml)

VsCode 编辑器的setting.json

{
	"git.ignoreMissingGitWarning": false,
	"workbench.iconTheme": "vscode-icons",
	"window.zoomLevel": 1,
	"editor.renderIndentGuides": false,
	"search.followSymlinks": false,
	"emmet.syntaxProfiles": {
		"vue-html": "html",
		"vue": "html"
	},
	"explorer.autoReveal": false,
	"files.autoSave": "off",
	"editor.wordWrap": "on",
	"editor.renderWhitespace": "all",
	"editor.detectIndentation": false,
	"editor.tabSize": 4,
	"workbench.colorTheme": "Dracula",
	"editor.snippetSuggestions": "top",
	"emmet.triggerExpansionOnTab": true,
	"editor.formatOnPaste": true,
	"search.exclude": {
		"**/node_modules/**": true,
		"**/bower_components": true
	},
	"editor.autoIndent": false,
	"liveServer.settings.donotShowInfoMsg": true,
	"search.location": "panel",
	"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
	"editor.quickSuggestions": {
		"other": true,
		"comments": true,
		"strings": true
	},
	"cssrem.rootFontSize": 23.4375,
	"git.path": "E:\\git\\Git\\bin\\git .exe",
	"gitlens.advanced.messages": {
		"suppressShowKeyBindingsNotice": true
	},
	"diffEditor.ignoreTrimWhitespace": true,
	"vsicons.dontShowNewVersionMessage": true,
	"stylusSupremacy.insertColons": false, // 是否插入冒号
	"stylusSupremacy.insertSemicolons": false, // 是否插入分号
	"stylusSupremacy.insertBraces": false, // 是否插入大括号
	"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
	"stylusSupremacy.insertNewLineAroundBlocks": false,
	"vetur.format.defaultFormatter.js": "prettier",
	"terminal.external.windowsExec": "E:\\git\\Git\\bin\\bash.exe",
	"terminal.integrated.shell.windows": "E:\\git\\Git\\bin\\bash.exe",
	"editor.formatOnSave": false, //每次保存的时候自动格式化
	"eslint.autoFixOnSave": true, //每次保存的时候将代码按eslint格式进行修复
	"eslint.validate": [
		"javascript",
		"javascriptreact",
		{
			"language": "vue",
			"autoFix": true
		}
		// {
		//     "language": "html",
		//     "autoFix": true
		// }
	], // 添加 vue 支持

	"prettier.semi": true, //必须要分号
	"prettier.singleQuote": true, //使用单引号替代双引号
	"prettier.tabWidth": 4,
	"prettier.useTabs": true,
	"prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
	// "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //函数(名)和后面的括号之间加个空格
	"vetur.format.defaultFormatterOptions": {
		"js-beautify-html": {
			"wrap_attributes": "force-aligned"
		}
	},
	"vetur.format.defaultFormatter.html": "js-beautify-html",
	"vetur.format.defaultFormatter.ts": "vscode-typescript"
}

VUE的 .eslintrc.js

// https://eslint.org/docs/user-guide/configuring

module.exports = {
    root: true,
    parserOptions: {
        parser: 'babel-eslint'
    },
    env: {
        browser: true,
        commonjs: true,
        node: true,
        es6: true
    },
    extends: [
        // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
        // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
        'plugin:vue/essential'
    ],
    // required to lint *.vue files
    plugins: ['vue'],
    // add your custom rules here
    rules: {
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 4个空格缩进
        indent: ['error', 4],
        // 注释必须跟随一个空白
        'spaced-comment': ['error', 'always'],
        // 尽量用 '' 有变量时可用 ``
        quotes: ['error', 'single'],
        // 总是 ; 结尾语句
        semi: ['error', 'always'],
        // 对不包含 await 表达式的 async 函数发出警告
        'require-await': 'warn',
        // 禁止在 function 定义中出现重复的参数
        'no-dupe-args': 'error',
        // 禁止在对象字面量中出现重复的键
        'no-dupe-keys': 'error',
        // 禁止空块语句
        'no-empty': 'error',
        // 禁用不必要的分号
        'no-extra-semi': 'error',
        // 禁止对 function 声明重新赋值
        'no-func-assign': 'error',
        // 禁止将全局对象当作函数进行调用
        'no-obj-calls': 'error',
        // 禁止在常规字符串中出现模板字面量占位符语法
        'no-template-curly-in-string': 'error',
        // 禁止在 return、throw、continue 和 break 语句后出现不可达代码
        'no-unreachable': 'error',
        // 强制数组方法的回调函数中有 return 语句
        'array-callback-return': 'error',
        // 要求 Switch 语句中有 Default 分支
        'default-case': 'error',
        // 禁止出现空函数
        'no-empty-function': 'error',
        // 禁用 eval()
        'no-eval': 'error',
        // 禁止对原生对象或只读的全局对象进行赋值
        'no-global-assign': 'error',
        // 禁止出现多个空格
        'no-multi-spaces': 'error',
        // 禁止多行字符串
        'no-multi-str': 'error',
        // 禁止原始包装实例
        'no-new-wrappers': 'error',
        // 禁止重新声明变量
        'no-redeclare': 'error',
        // 禁止自身赋值
        'no-self-assign': 'error',
        // 要求使用 Error 对象作为 Promise 拒绝的原因
        'prefer-promise-reject-errors': 'error',
        // 禁止变量声明覆盖外层作用域的变量
        'no-shadow': 'error',
        // 禁用未声明的变量
        'no-undef': 'error',
        // 不允许初始化变量值为 undefined
        'no-undef-init': 'error',
        // 强制在模块顶部调用 require()
        'global-require': 'error',
        // 禁止或强制在代码块中开括号前和闭括号后有空格
        'block-spacing': ['error', 'always'],
        // 大括号风格要求
        'brace-style': 'error',
        // 要求使用骆驼拼写法
        camelcase: ['error', { properties: 'always' }],
        // 逗号风格
        'comma-style': ['error', 'last'],
        // 要求或禁止在函数标识符和其调用之间有空格
        'func-call-spacing': ['error', 'never'],
        // 强制隐式返回的箭头函数体的位置
        'implicit-arrow-linebreak': ['error', 'beside'],
        // 强制在对象字面量的键和值之间使用一致的空格
        'key-spacing': [
            'error',
            { beforeColon: false, afterColon: true, mode: 'strict' }
        ],
        // 强制关键字周围空格的一致性
        'keyword-spacing': ['error', { before: true, after: true }],
        // 禁止使用 空格 和 tab 混合缩进
        'no-mixed-spaces-and-tabs': 'error',
        // 不允许多个空行,最大为2行,强制文件末尾的最大连续空行数为1,强制文件开始的最大连续空行数为1
        'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1, maxBOF: 0 }],
        // 禁止属性前有空白
        'no-whitespace-before-property': 'error',
        // 要求对象字面量属性名称的使用
        'quote-props': ['error', 'as-needed'],
        // 强制分号前后不能有空格
        'semi-spacing': ['error', { before: false, after: true }],
        // 要求或禁止函数圆括号之前有一个空格
        'space-before-function-paren': ['error', 'never'],
        // 禁止或强制圆括号内的空格
        'space-in-parens': ['error', 'never'],
        // 要求中缀操作符周围有空格
        'space-infix-ops': 'error',
        // 要求或禁止在模板标记和它们的字面量之间有空格
        'template-tag-spacing': 'error',
        // 要求箭头函数体使用大括号
        'arrow-body-style': ['error', 'always'],
        // 要求箭头函数的参数当只有一个参数时允许省略圆括号
        'arrow-parens': ['error', 'as-needed'],
        // 要求箭头函数的箭头之前或之后有空格
        'arrow-spacing': ['error', { before: true, after: true }],
        // 不允许改变用const声明的变量
        'no-const-assign': 'error',
        // 不允许类成员中有重复的名称
        'no-dupe-class-members': 'error',
        // 禁止重复导入
        'no-duplicate-imports': 'error',
        // 强制剩余和扩展运算符及其表达式之间没有空格
        'rest-spread-spacing': ['error', 'never'],
        // 该规则要求在方法链中 允许在同一行成链的深度为2
        'newline-per-chained-call': ['error', { ignoreChainWithDepth: 2 }]
    }
};

js的 .eslintrc.js

module.exports = {
    env: {
        browser: true,
        commonjs: true,
        node: true,
        es6: true,
        jquery: true
    },
    parserOptions: {
        ecmaVersion: 2017,
        sourceType: 'module'
    },
    rules: {
        'generator-star-spacing': 'off',
        //4个空格缩进
        indent: ['error', 4],
        //注释必须跟随一个空白
        'spaced-comment': ['error', 'always'],
        //尽量用 '' 有变量时可用 ``
        quotes: ['error', 'single'],
        //总是 ; 结尾语句
        semi: ['error', 'always'],
        //对不包含 await 表达式的 async 函数发出警告
        'require-await': 'warn',
        //禁止在 function 定义中出现重复的参数
        'no-dupe-args': 'error',
        //禁止在对象字面量中出现重复的键
        'no-dupe-keys': 'error',
        //禁止空块语句
        'no-empty': 'error',
        //禁用不必要的分号
        'no-extra-semi': 'error',
        //禁止对 function 声明重新赋值
        'no-func-assign': 'error',
        //禁止将全局对象当作函数进行调用
        'no-obj-calls': 'error',
        //禁止在常规字符串中出现模板字面量占位符语法
        'no-template-curly-in-string': 'error',
        //禁止在 return、throw、continue 和 break 语句后出现不可达代码
        'no-unreachable': 'error',
        //强制数组方法的回调函数中有 return 语句
        'array-callback-return': 'error',
        //要求 Switch 语句中有 Default 分支
        'default-case': 'error',
        //禁止出现空函数
        'no-empty-function': 'error',
        //禁用 eval()
        'no-eval': 'error',
        //禁止对原生对象或只读的全局对象进行赋值
        'no-global-assign': 'error',
        //禁止出现多个空格
        'no-multi-spaces': 'error',
        //禁止多行字符串
        'no-multi-str': 'error',
        //禁止原始包装实例
        'no-new-wrappers': 'error',
        //禁止重新声明变量
        'no-redeclare': 'error',
        //禁止自身赋值
        'no-self-assign': 'error',
        //要求使用 Error 对象作为 Promise 拒绝的原因
        'prefer-promise-reject-errors': 'error',
        //禁止变量声明覆盖外层作用域的变量
        'no-shadow': 'error',
        //禁用未声明的变量
        'no-undef': 'error',
        //不允许初始化变量值为 undefined
        'no-undef-init': 'error',
        //强制在模块顶部调用 require()
        'global-require': 'error',
        //禁止或强制在代码块中开括号前和闭括号后有空格
        'block-spacing': ['error', 'always'],
        //大括号风格要求
        'brace-style': 'error',
        //要求使用骆驼拼写法
        camelcase: ['error', { properties: 'always' }],
        //逗号风格
        'comma-style': ['error', 'last'],
        //要求或禁止在函数标识符和其调用之间有空格
        'func-call-spacing': ['error', 'never'],
        //强制隐式返回的箭头函数体的位置
        'implicit-arrow-linebreak': ['error', 'beside'],
        //强制在对象字面量的键和值之间使用一致的空格
        'key-spacing': [
            'error',
            { beforeColon: false, afterColon: true, mode: 'strict' }
        ],
        //强制关键字周围空格的一致性
        'keyword-spacing': ['error', { before: true, after: true }],
        //禁止使用 空格 和 tab 混合缩进
        'no-mixed-spaces-and-tabs': 'error',
        //不允许多个空行,最大为2行,强制文件末尾的最大连续空行数为1,强制文件开始的最大连续空行数为1
        'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1, maxBOF: 0 }],
        //禁止属性前有空白
        'no-whitespace-before-property': 'error',
        //要求对象字面量属性名称的使用
        'quote-props': ['error', 'as-needed'],
        //强制分号前后不能有空格
        'semi-spacing': ['error', { before: false, after: true }],
        //要求或禁止函数圆括号之前有一个空格
        'space-before-function-paren': ['error', 'never'],
        //禁止或强制圆括号内的空格
        'space-in-parens': ['error', 'never'],
        //要求中缀操作符周围有空格
        'space-infix-ops': 'error',
        //要求或禁止在模板标记和它们的字面量之间有空格
        'template-tag-spacing': 'error',
        //要求箭头函数体使用大括号
        'arrow-body-style': ['error', 'always'],
        //要求箭头函数的参数当只有一个参数时允许省略圆括号
        'arrow-parens': ['error', 'as-needed'],
        //要求箭头函数的箭头之前或之后有空格
        'arrow-spacing': ['error', { before: true, after: true }],
        //不允许改变用const声明的变量
        'no-const-assign': 'error',
        //不允许类成员中有重复的名称
        'no-dupe-class-members': 'error',
        //禁止重复导入
        'no-duplicate-imports': 'error',
        //强制剩余和扩展运算符及其表达式之间没有空格
        'rest-spread-spacing': ['error', 'never'],
        // 该规则要求在方法链中 允许在同一行成链的深度为2
        'newline-per-chained-call': ['error', { ignoreChainWithDepth: 3 }]
    }
};

Node.js

node.js 环境配置

安装包的方式安装

• 安装包下载链接：
  • Mac OSX： darwin
  • Windows：
    • x64
    • x86
• 安装操作：
  • 一路Next

更新版本

• 操作方式：
  • 重新下载最新的安装包；
  • 覆盖安装即可；
• 问题：
  • 以前版本安装的很多全局的工具包需要重新安装
  • 无法回滚到之前的版本
  • 无法在多个版本之间切换（很多时候我们要使用特定版本）

NVM工具的使用

Node Version Manager（Node版本管理工具）

由于以后的开发工作可能会在多个Node版本中测试，而且Node的版本也比较多，所以需要这么款工具来管理

安装操作步骤

1. 下载：nvm-windows
2. 解压到一个全英文路径
3. 编辑解压目录下的settings.txt文件（不存在则新建）

• root 配置为当前 nvm.exe 所在目录
• path 配置为 node 快捷方式所在的目录
• arch 配置为当前操作系统的位数（32/64）
• proxy 不用配置

4. 配置环境变量 可以通过 window+r : sysdm.cpl

• NVM_HOME = 当前 nvm.exe 所在目录
• NVM_SYMLINK = node 快捷方式所在的目录
• PATH += %NVM_HOME%;%NVM_SYMLINK%;
• 打开CMD通过set [name]命令查看环境变量是否配置成功
• PowerShell中是通过dir env:[name]命令

5. NVM使用说明：

• https://github.com/coreybutler/nvm-windows/

6. NPM的目录之后使用再配置

配置Python环境

Node中有些第三方的包是以C/C++源码的方式发布的，需要安装后编译
确保全局环境中可以使用python命令