The initial installation VSCode and VUE and simple Getting Started

(Version 2.0)

A: Installing Node.js

1. Node.js https://nodejs.org/en/download/ in the official website to download the installation package.
2. Install after downloading.
3. Open a command line, enter the node -v can check the version number. Enter npm npm -v can see the version number. The new version of Node.js has built npm (nuget package manager similar in .net), will be installed when you install Node.js. (To use this command to update the future npm npm intall npm @ latest -g)
4. Configure the environment variables (here will be automatically configured).
5. Enter command line node, and then enter console.log ( "hello"); to verify that the installation was successful.
6. And cache storage path npm path configuration of the global module, the installation directory node.js node_global new node-cache and two folders, and command line:
   npm config set prefix "c:\Program Files\nodejs\node_global"
npm config set cache "c:\Program Files\nodejs\node_cache"
   the future after a npm install xxx -g mounted in this module two folder.

Npm configuration environment variables: system variables path in a new variable:
C: \ Program Files \ nodejs \ node_global \ node_modules, (which is mounted on the Node write what), and then modify the user variables C variables: \ Program Files \ nodejs \ node_global, and finally you can delete the C: \ Users \ npm directory \ under xlz AppData \ Roaming up.

II: Installation cnpm

1. Enter the command: cnpm install , upon completion of the C: \ Program Files \ nodejs \ node_global \ directory under node_modules cnpm can see the folder and its files.

III: mounting webpack (js static application modules packer module bundler)

1. Input  cnpm install webpack -g  installation, is given how to remove -g.

Four: Installation vue-cli (vue tool used to generate the template)

1. Input cnpm install vue-cli -g  installation.

Five: Create a new project to test Vue

1. In a disk to create a new folder, enter the command line vue init webpack xxx (project name) to create, press the enter key to confirm several times, the last step choose No.
2. cd xxx (project name), that is, into the project created.
3. Enter rely cnpm install download and install the program.
4. Enter cnpm run dev, then browser via http: Access 8080 Address: // localhost.

Six: installation VSCode (official website can be downloaded)

1. Installation vetur plug (vue syntax highlighting), eslint plug (intelligent error monitoring), install open in broswer plug-in (using alt + b to use a browser to open the current html file).

Seven: Code Formatter

1. Open .eslintrc.js project file in the root directory, add the "space-before-function-paren" in the rules: [ "error", "never"], the purpose is to make eslint check between the function name and the brackets can not have spaces.
2. Installation vs code extension tool: vetur, Prettier-Code formatter and ESLint.
3. vs code set by the user: File - Preferences - Setting:
   In the open window of the "User Settings" add the following contents:
   { // prettier:每行在这个字符数内整合代码，如果你的屏幕较宽分辨率较高可以适当加大 "prettier.printWidth": 120, // prettier:是否在每行末尾加上分号 "prettier.semi": false, // prettier:如果为true，将使用单行否则使用双引号 "prettier.singleQuote": true, // vetur:对html的内容使用js-beautify-html "vetur.format.defaultFormatter.html": "js-beautify-html" }
4. Press Alt + Shift + F, the code can be formatted.

Eight: automatically generating code blocks

1. In vs code, use the keyboard shortcut Ctrl + Shift + P to open the search bar -> Input snippet -> Select Preferences (Preferences: Configuring user code snippets)
2. Input vue -> select vue.json (Vue)
3. Vue content input component to be generated
   { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "</template>\n", "<script>", "export default {", " data() {", " return {\n", " }", " },", " methods: {\n", " },", " components: {\n", " }", "}", "</script>\n", "<style>\n", "</style>", "$2" ], "description": "创建一个自定义的vue组件代码块" } }
4. After the files are created vue, vue input tab and then look at the basic structure came out.

Nine: common plug-ins recommended

1. The Close the Tag Auto : automatic closing Html / XML tags;
2. The Rename the Tag Auto : automatically modifying the other side of the synchronization label;
3. The Beautify : formatting code, the code to support custom formatting rule;
4. Pair Colorizer Bracket : brackets of different colors to distinguish between different blocks;
5. Chrome for Debugger : breakpoints on vscode mapped onto the chrome, convenient debugging;
6. ESlint : JS syntax error correction, configuration is more complex;
7. GitLens : git log for easy viewing;
8. CSS Support HTML : Smart Tips css type and id;
9. Snippet Html  : Smart Tips Html tags, labels and meaning;
10. JavaScript (ES6) code snippet  : ES6 intelligent grammar tips, and fast input;
11. Code Snippet jQuery : jQuery code intelligence tips;
12. Material Icon Theme-iconsThe and vscode : best vscode theme;
13. in Browser Open : Support shortcut to open the html file in a browser;
14. Intellisense Path : Automatic prompting for file path, supports a variety of file quickly introduced;
15. Vetur : Vue multi-functional integrated plug-ins.

Ten: Table of Contents Introduction

1. there are some actions build file using npm run * file is actually performed here;
2. config configuration files, executable files need configuration information;
3. src resource files, and all the components used pictures are placed here;
   3.1 the Assert resource folder, put the resource picture and the like;
   3.2 Components Components folder, write all the components are placed in this folder;
   3.3 Router Routing folder this rule determines the jump page;
   3.4 App.vue application components, all of their components are written to run on this component;
   3.5 main.js WebPACK entry documents, webpack four characteristics: entry entry, output output, loader loader, plugins plugins
4. node_modules put all dependent modules, often do not upload this file (file many and large);
5. dist file, the finished page after the package:
   5.1 index.html page is a single page application;
   5.2 static

XI: Project Package

Package command: npm run build, after complete package will be generated in the root directory of a dist folder, this is the final product page, you need to pack a path to a relative path, based on the way to track the build command, the config \ index. js file build object, assetsPublicPath the "/" to "./" button, and you can delete the message build \ build.js in these two sentences;

Twelve: Beautify plugin configuration * .vue

1. Click Settings, find beautify.language copy this section to the user area, a bar and html plus vue can be.
2. File -> Settings -> Keyboard shortcuts settings, open the Edit keybindings.json, enter
   { "key": "alt+shift+e",//自己定键位 "command": "HookyQR.beautify", "when": "editorFocus" }

Thirteen: ESLint using the configuration (for review of the code specifications) related

1. Choose to use ESLint management code when initializing the project
   Use ESLint to lint your code? ( Y / n)
2. Interpretation of the document:
   2.1 .editorconfig: mainly used to configure the IDE;
   root = true # 对所有文件有效 //[*js]只对js文件有效 [*] #设置编码格式 charset = utf-8 #缩进类型 可选space和tab indent_style = space #缩进数量可选整数值2 or 4,或者tab indent_size = 2 #换行符的格式 end_of_line = lf # 是否在文件的最后插入一个空行 可选true和false insert_final_newline = true # 是否删除行尾的空格 可选择true和false trim_trailing_whitespace = true

2.2 .eslintignore: place the required files ESLint ignored, valid only for .js files;
/build/ /config/ /dist/ /src/utils/ /src/router/*.js

2.3 .eslintrc.js: ESLint of checking rules to configure;
module.exports = { //此项是用来告诉eslint找当前配置文件不能往父级查找 root: true, //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析 parser: 'babel-eslint', //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式 parserOptions: { sourceType: 'module' }, //此项指定环境的全局变量，下面的配置指定为浏览器环境 env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错 extends: 'standard', // required to lint *.vue files // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的 plugins: [ 'html' ], // add your custom rules here // 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin- // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致 // "off" -> 0 关闭规则 // "warn" -> 1 开启警告规则 //"error" -> 2 开启错误规则 // 了解了上面这些，下面这些代码相信也看的明白了 rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // js语句结尾必须使用分号 'semi': ['off', 'always'], // 三等号 'eqeqeq': 0, // 强制在注释中 // 或 /* 使用一致的空格 'spaced-comment': 0, // 关键字后面使用一致的空格 'keyword-spacing': 0, // 强制在 function的左括号之前使用一致的空格 'space-before-function-paren': 0, // 引号类型 "quotes": [0, "single"], // 禁止出现未使用过的变量 // 'no-unused-vars': 0, // 要求或禁止末尾逗号 'comma-dangle': 0 } }

1. How to join ESLint in the old project:
   3.1 .editorconfig added in the catalog, .eslintrc.js, .eslintignore these three documents;
   3.2 added packages ESlint need in package.json of "devDependencies" in
   "babel-eslint": "^7.1.1", "eslint": "^3.19.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-html": "^3.0.0", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1",

3.3 added ESlint rules bulid / webpack.base.conf.js file and take effect
// 在module的rules中加入 module: { rules: [ { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), // 不符合Eslint规则时只警告(默认运行出错) // emitWarning: !config.dev.showEslintErrorsInOverlay } }, ] }

3.4 bulid code to run again