Vue前端构建

vscode插件

ESLint：ES语法规则检查，例如no-console禁止console.log
Vetur：Vue语法高亮、提示完成、语法检查、格式化等
Prettier、todo tree

全局安装

全局Nodejs安装

参考https://npmmirror.com/
$ npm config list
$ npm config set registry https://registry.npmmirror.com
上面命令会在当前用户家目录增加~/.npmrc文件，写入配置
如果需要本项目配置，请在项目根目录下建立.npmrc，写入
registry=https://registry.npmmirror.com

全局yarn安装：yarn可以看作是npm的增强版。yarn有更好的速度、解决依赖的能力

$ npm install -g yarn

全局安装VueCLI

$ yarn global add @vue/cli
或
$ npm install -g @vue/cli

可以使用 npm config list 查看信息。

创建项目

全局安装过了VueCli

打开命令行，输入下面命令，启用可视化管理界面，可以创建、配置项目、安装插件、调试运行

vue  ui

会打开Vue项目管理器，点击+创建新项目。选择一个目录作为开发目录（注意这不是项目根目录，生成新的项目后的目录才是项目根目录），点击+在此创建新项目

关闭history mode，启用hash模式（url中使用#）
Lint on Save：保存代码时进行Lint校验

这一步可能出错，如下图

使用 node -v 查看当前版本是14.8.0，重新安装符合版本要求的nodejs即可。

Windows下一种简单的办法，官方下载zip包，替换原安装目录（例如C:\Program Files\nodejs）即可。

安装插件

Vue CLI插件都以vue-cli-plugin-<name>规则命名

element-ui

安装vue-cli-plugin-element

选择import on demand 按需导入，点击完成安装

依赖

axios

版本管理

Vue UI在项目构建过程中，已经使用了Git管理

可以公司搭建gitlab服务或使用在线服务，例如github、gitee

本次使用Gitee管理，请自行到官网 https://gitee.com/ 注册。

去Git官网下载对应的客户端 https://git-scm.com/downloads

公钥

请使用Git客户端，它提供了ssh-keygen命令。为当前用户生成公钥，生成的公钥私钥都放在~/.ssh目录中。

下面测试的时候，连续按回车即可。

$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/wayne/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/wayne/.ssh/id_rsa.
Your public key has been saved in /c/Users/wayne/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:u7YHo/8 wayne@wayne-pc
The key's randomart image is:
+---[RSA 2048]----+
| ..o.+. ...     |
|   + =..+ +..   |
|   O . *oo     |
|   .o* .*+     |
|   +oo+ So..     |
| ooo .*+ .     |
| .oo+ oE.       |
| o.+.+           |
|.o+ o           |
+----[SHA256]-----+

如果没有放置公钥到Gitee，测试下面命令失败

$ ssh -T git@gitee.com
git@gitee.com: Permission denied (publickey).

复制公钥文件 ~/.ssh/id_rsa.pub 的内容到Gitee后台。

打开菜单，点击设置，选择左侧导航栏中的SSH公钥

根据官方提供的测试方法 ssh -T git@gitee.com ，如下图

$ ssh -T git@gitee.com
The authenticity of host 'gitee.com (212.64.62.183)' can't be established.
ECDSA key fingerprint is SHA256:FQGC9Kn/eye1Wey0Wc.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'gitee.com,212.64.62.183' (ECDSA) to the list of 
known hosts.
Hi Wayne! You've successfully authenticated, but GITEE.COM does not provide 
shell access.

Gitee仓库

Git配置

git config -e [--global | --system | --lobal]编辑配置文件

git配置文件

--system：安装目录或全局配置目录，优先级最低
--global：~/.gitconfig
--local：缺省值。项目根目录中.git/config，优先级最高

项目根目录中e:/ClassProjects/frontprojects/mammoth
wayne@wayne-pc MINGW64 /e/ClassProjects/frontprojects/mammoth (master)
$ git config user.name wayen
wayne@wayne-pc MINGW64 /e/ClassProjects/frontprojects/mammoth (master)
$ git config user.email wayne@magedu.com

git命令项目根目录中执行，先做一次本地提交
$ git status
$ git add .
$ git commit -m "add axios"



git add .
git commit -m "更新了xxx" 
git push -u origin master 
git checkout -b login //创建分支并拉取 
git branch //查看分支

$ git remote add origin https://gitee.com/wayne_magedu/mammoth.git
$ git push -u origin master

如果出现Gitee登录框，请输入用户名、密码即可。

刷新远程Gitee仓库，出现了提交的代码。

启动开发时的server，类似nginx的http web服务，返回html、css。js是babel转义后的。

启动一个http server，webpack打包文件，浏览器访问了，返回HTML、CSS、JS资源，浏览器渲染。开发用server可以提供热更新

SPA：Single Page Application，单页面应用。就一个HTML页面，所有动态变化都是js动态实现。js操作DOM树

App.vue 单文件组件，template、script 、style。该组件容纳其他组件的，