Vue learning (a) installation and configuration, create a hello world project

IDE selected vscode

***************************

***************************

Installation nodejs:  https://nodejs.org/en/  official website to download and install the LTS version, the current version 12.14.0

After the installation tests are as follows:

Installation was successful nodejs

***************************

***************************

Configure npm domestic sources:

npm config set registry https://registry.npm.taobao.org

To test whether the configuration is successful:

npm config get registry

Installation vue and used scaffolding:

npm install webpack -g

npm install -g @vue/cli

Command line input vue test whether the installation was successful:

***************************

***************************

To find a suitable folder, ready to build your project vue. Our first project preparation named hello_zt. In this folder, type the following command:

vue create hello_zt




(提一句,vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接。可能有的小伙伴会看到有vue init webpack hellO_zt这种写法。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置))

Displays the following information:

We chose default, just press Enter. Wait a moment, OK it:

Follow the prompts to start the service to try:

You can open, flattered.

***************************

***************************

Open just look at the engineering vscode:

Opening the App.vue, the lower right corner is recommended that you install Vetur plug.

It includes syntax highlighting, error and other common functions.

It's almost been determined to develop vuestandard project, and vscodewill strongly recommend that you install it:

************************************

************************************

Install some other plug-ins:

*****************************

yarn:

What is yarn:

facebook yarn is released a package management tool.

Each packet is cached it downloads, without re-downloading; can operate at the maximum parallelism of resource utilization.
Use the format detailed and concise lockfile files and deterministic algorithms to install dependencies, to ensure running on a system installation process will run the same way on other systems.
Check the integrity of the installation package before it is executed.

Installation command:

npm install -g yarn

We acquire it installed prettier, do code format alignment.

Let's just try to add a few spaces:

Vscode recall terminal (the shortcut ctrl + shift + y):

Enter the following command:

yarn lint

Will remove the spaces under observation ................ found and not removed T_T

这是因为缺省的vue-cli没有为我们安装@vue/prettier插件，我们在终端手工安装一下：

yarn add -D @vue/eslint-config-prettier

然后在package.json中加上相应配置:

再次运行yarn lint命令试试:

尴尬报错。。。。。。继续安装缺失的插件:

yarn add eslint-plugin-vue   (为当前项目安装eslint-plugin-vue )

(也可以用yarn global add eslint-plugin-vue去全局安装,可用yarn global bin命令查看yarn bin文件夹路径,并将该路径设置为系统变量)

继续在vscode的终端下输入yarn lint , 查看效果:

可以看到。。空格没啦！！美滋滋！不过。。单引号也都变成双引号了。。。嘛，设置一下lint格式~

根目录下新建一个.prettierrc.js文件,并在其中建入以下内容:

module.exports = {
  semi: false,          //每行代码结尾的分号
  singleQuote: true     //单引号
}

再次运行yarn lint , 可以看到，都是单引号！没空格！没分号！如果以后接手别人乱七八糟的项目,一个yarn lint就可以变整齐啦~

**************************************************

**************************************************

eslint:

什么是eslint:

它是一个插件化并且可配置的JavaScript语法规则和代码风格的检查工具,说白了就是让你代码写的好看点,格式不会太乱。

在vscode的应用商店里搜索eslint,并安装:

我们随便加点空格试试：

 提示很明显。这样基本的环境就搭成了，可以撸起袖子敲代码啦