手把手教安装VUE安装教程+VScode配置！！！

Posted momo_via

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手把手教安装VUE安装教程+VScode配置！！！相关的知识，希望对你有一定的参考价值。

含泪整理Vue安装教程

因为换了新电脑很多软件要重装，所以想到可以写一份教程，为我以后换电脑方便重装也为了大家！！
第一次安装Vue踩坑太多，这里整理一份超详细教程（win11也可！！！）

  1. 下载node.js
    Windows可以直接选这个下载完成后直接next安装即可

  2. 打开cmd（我喜欢管理员方式打开）
    输入可查看版本

    【注意：报错1来了】
    npm WARN config global --global, --local are deprecated. Use --location
    在这里可以将node.js里npm和npm.cmd里的prefix -g替换为prefix --location=global
    如果是管理员权限不可修改的话，我是拖到桌面改完就拖回来的（觉得比较快哈哈哈哈哈）然后再执行第二步即可

  3. 在node.js文件夹下新建两个文件夹【node_global】和【node_cache】

    然后在cmd中执行这两行命令

    【注意：这里就体现出管理员打开的重要性，如果不是管理员打开就会报错！】

  4. 此电脑–>属性–>高级系统设置
    选择环境变量中的系统环境新建

== 这里的名称不要写错，并且注意避免有中文==
5. 将用户目录下的
改为下图所示

6. 依次输入这些命令配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
可以安装cnpm，如果后续嫌npm安装慢

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


7. npm install vue -g安装vue.js
8. npm install webpack -g安装webpack模板
安装webpack-cli：npm install --global webpack-cli
安装成功后可使用webpack -v查看版本号
按图操作
或者输入下方命令安装脚手架（我是全都执行了一遍，因为俺是菜鸡~）
cnpm install -g @vue/cli

  1. 安装vue-router，输入npm install vue-router -g
  2. 输入vue -V查看版本
  3. 输入vue ui命令就可以进入界面啦

    ==因为我用VScode写Vue，所以后面如何创建就不写啦

Step2 vscode配置Vue

1、插件（我下了很多）

语法高亮
汉化
语法纠错
自动闭合标签以及另一侧标签同步修改
ES6语法
括号着色器
路劲自动补全
快捷键显示

2、创建以及运行

创建：vue create xxx
运行：npm run serve

如果是下载的别人的项目

         npm install
运行：npm run dev

3、常用配置文件下载

无脑复制粘贴执行就行

设置淘宝镜像
npm config set registry https://registry.npm.taobao.org


npm install webpack --save-dev
npm install webpack-dev-server --save-dev


npm i element-ui -S

npm install less@3.9.0 --save-dev --force
npm install less-loader@5.0.0 --save-dev --force


npm i vue-router -S

【excel表格工具】
 npm i -S exceljs file-saver luckyexcel

需要在main.js下配置一下才可以使用，可以自行百度，类似于这种
可以根据自己的报错修改

//引入Vue
import Vue from "vue";
//引入App
import App from "./App.vue";
//引入VueRouter
import VueRouter from "vue-router";
//引入路由器
import router from "./router";
//统一接口api文件夹里面全部请求函数
//统一引入
import * as API from "@/api";
// 三级联动组件--全局组件
import TypeNav from "@/components/TypeNav/index.vue";
// 分页器--全局组件
import Pagination from "@/components/pagnation/index.vue";
//引入MockServer.js----mock数据
import "@/mock/mockServe";
import  Button, MessageBox  from "element-ui";
// 映入仓库
import store from "@/store";
// 引入swiper样式
import "swiper/css/swiper.css";
// 第一个参数组件的名字,第二个参数哪一个组件
Vue.component(TypeNav.name, TypeNav);
Vue.component(Pagination.name, Pagination);
Vue.component(Button.name, Button);
// 使用路由插件
Vue.use(VueRouter);
//ElementUI注册组件的时候，还有一种写法，挂在原型上
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
// 引入图片懒加载
import img from '@/components/images/wx_cz.jpg'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, 
        preLoad: 1.3,
        error: 'dist/error.png',
        loading: img,
        attempt: 1
    )
    //引入表单校验插件
import "@/plugins/validate";

//关闭Vue的生产提示
Vue.config.productionTip = false;
//创建vm
new Vue(
    el: "#app",
    // 注册全局事件总线
    beforeCreate() 
        Vue.prototype.$bus = this;
        Vue.prototype.$API = API;
    ,
    render: (h) => h(App),
    // 配置路由
    router: router,
    // 注册仓库
    store: store,
);

2023年最新详细教程！手把手教你搭建Hexo + GitLab个人博客

文章目录

前言

本文适合所有想要搭建个人博客的读者（无论您是大佬🤖，🆚 还是新手小白🐼，都可放心食用），本文教程以 Windows 为例。

文章稍长，建议点赞收藏📝

一、安装和配置环境

⛔如果是已经有环境的小伙伴则可以跳过此目录

1.安装 Git

从Git官网地址：https://www.git-scm.com/download/ 下载Git 软件，按默认选项安装即可。

如果你对git命令不熟悉也没关系，这里推荐下载 Git小乌龟 🐢TortoiseGit 用熟悉的Windows界面操作git，一样按默认选项安装即可。但是，这里需要注意的是必须先安装git，再安装git小乌龟。

2.安装 Node.js

从node.js官网：https://nodejs.org/en/ 下载Node.js软件，推荐下载稳定版本，然后按默认选项安装即可。安装完成后，按win+R，输入cmd打开命令行，然后输入node --version，若能正常显示版本号，则说明安装成功。

二、新建博客项目

1.GitLab配置CI/CD自动化部署

CI/CD的核心概念是持续集成、持续交付和持续部署，简单来说就是当我们把代码push到GitLab时，GitLab会自动调用一个叫runners的玩意儿帮项目自动生成页面并部署。这个和在Github pages上部署博客不一样的是，Github需要先在本地生成各种静态网页和文件，然后再推送到Github pages。

1.1 GitLab新建项目

  1. ✔ 登录官网 https://gitlab.com/ 登录账户（没有账户的按提示注册账户）
  2. ✔创建一个username.github.io的项目（其中username为自己的账户名)
  3. ✔点击项目左侧 Settings > CI/CD > Runners > Enable，开启Runners

1.2 GitLab自建Runners

GitLab默认开启共享Runners，但是由于使用共享Runners需要验证，这里关掉共享Runners，用我们自建本地Runners。

Pipeline failing? To keep GitLab spam and abuse free we ask that you verify your identity.Until then, shared runners will be unavailable.Validate your account or use your own runners.

  • ✔创建一个文件夹，如E:\\GitLab-Runner
  • ✔下载二进制文件，改名为gitlab-runner.exe
  • ✔注册Runners

1.2.1 下载gitlab-runner

参考https://docs.gitlab.com/runner/install/windows.html，下载对应版本

1.2.2 注册Runners

在上面新建的E:\\GitLab-Runner文件夹，打开cmd，运行二进制文件

.\\gitlab-runner.exe register

按提示步骤操作，输入url和token（在Settings-CI/CD-Runners 里面可以找到）其他可以不用填，最后输入runner执行器（这里写的shell）

1.2.3 安装Runners并启动

将GitLab Runner安装为服务并启动它。您可以使用内置系统帐户（推荐）或使用用户帐户运行该服务。

打开cmd，执行命令

cd E:\\GitLab-Runner
.\\gitlab-runner.exe install
.\\gitlab-runner.exe start

至此，自建Runners就完美结束啦！ 🎉🎉🎉，那如何知道Runners是否正常呢？

在Settings-CI/CD-Runners Specific runners 下面看到刚刚建的Runnner（如果前面有个绿色的圆圈，则成功运行。如果是感叹号，则没有成功）

❌出现问题

ERROR: Job failed (system failure): prepare environment: failed to start process: exec: “pwsh”: executable file not found in %PATH%.

⭕解决方法

转到GitLab运行程序的安装目录，如E:\\GitLab-Runner。打开config.toml文件，并用powershell替换pwsh，如下所示：

1.3 添加.gitlab-ci.yml文件

项目新增文件gitlab-ci.yml，配置如下（其中node需要填写自己下载的node版本）：

image: node:16-alpine # use nodejs v16 LTS
cache:
  paths:
    - node_modules/

before_script:
  - npm install hexo-cli -g
  - npm install

pages:
  script:
    - npm run build
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

2.拉取和推送hexo blog

2.1 拉取hexo blog

在E盘拉取Gitlab刚刚建立的项目，（这里主要用可视化界面操作，不会git命令也不用担心），右击鼠标选择clone代码，填写项目地址和分支


💭项目地址在这里查看

项目拉取完成，在项目文件目录下鼠标右键点击 Git Bash Here，依次输入如下命令👇

npm install hexo-cli -g
hexo init blog

执行后，会生成blog文件，将blog内容移到项目文件目录下

在项目目录下，执行命令👇

npm install
hexo server


打开http://localhost:4000/，本地博客成功运行。

2.2 推送项目

修改_config.yml配置文件，站点url修改为https://username.gitlab.io，如下：

提交推送代码，同上，右击鼠标选择Git 提交，选择提交并推送

将文件夹push到GitLab，一旦push完成，GitLab就会开始自动部署，在 CI/CD-Pipeline 中可以看到

✔部署完成后，打开 https://username.gitlab.io/ 就能看到博客页面了。

三、绑定个人域名

如果你想要通过自定义域名访问自己的博客，可以将个人域名解析到默认域名上，这样就可以通过个人域名来访问这个博客

🚫前提是有自己的域名，没有的可以在阿里云上去购买

1.GitLab Pages 配置

可以在Deployments-Page 下进行设置

点击 New Domain，将相应的资料填入，点击完成即可。

点击create new domain之后，会出现提示This domain is not verified. You will need to verify ownership before access is enabled.

需要先验证域名，在阿里云添加一个验证域名的DNS解析：

  • ✔ 记录类型选择TXT
  • ✔ 主机记录域名前缀_gitlab-pages-verification-code.www（根据自己生成的）
  • ✔ 记录值为gitlab-pages-verification-code=之后的字符串


2.域名设置

2.1 域名解析

打开阿里云控制台->域名->域名解析，添加个人域名指向我们的Gitlab Pages博客站点的默认域名:https://username.gitlab.io 的主机记录。

一般我们添加两条主机记录，分别是前缀www和前缀@，记录类型选择CNAME，记录值填写默认域名：username.gitlab.io 。TTL最短10分钟，也就是10分钟后域名解析生效。生效后我们就可以使用个人域名来访问这个博客了。

2.2 申请ssl证书

上面说到新建domain时，需要填写ssl证书的信息，这里简单说一下申请ssl证书的流程

⭕控制台->SSL 证书（应用安全）->免费开启ssl证书（申请证书需要实名认证），申请ssl证书后，点击下载，选择其他，下载证书。



下载证书之后，打开将对应信息填入即可。

四、写文章和更换主题

🔴 博客已经成功搭建了，但是我们该怎么写博客呢？

🔻文章保存在项目路径 \\username.gitlab.io\\source_posts 中

用编辑器Markdow 语法编写文章

md 全称 Markdown， Markdown 是 2004 年由 John Gruberis设计和开发的纯文本格式的语法，非常的简单实用，常用的标记符号屈指可数，几分钟即可学会， .md 文件可以使用支持 Markdown 语法的编辑器编辑，然后保存文件到 \\username.gitlab.io\\source_posts 文件夹下即可

🔰 推荐 Windows 上使用 MarkdownPad2 或者小书匠 编辑器
🔰 macOS 上使用 Mou 编辑器
🔰 Linux 上使用 Remarkable编辑器
🔰 Web 端上使用 CSDN

🔴默认的主题比较简单，那么如何更换自己喜欢的主题呢？

🔻hexo官网或 github 有许多的主题可以供我们选择


找到主题的官方文档 ，按照使用文档操作即可（这里以Theme Rdefine为例）


在username.gitlab.io目录下，点击Git Bash Here，执行如下 git 命令

git clone https://github.com/EvanNotFound/hexo-theme-redefine.git themes/redefine

下载成功后，你会发现你的目录*\\themes**出现了 Redefine 主题*

✅安装完成后，在 username.gitlab.io/_config.yml配置文件中将 theme 设置为 Redefine

hexo s 本地预览一遍，成功切换主题

至此，GitLab 自动部署Hexo blog的教程全部结束了🎉🎉🎉，你可以通过https://username.gitlab.io 访问，也可以通过个人域名访问自己的个人博客

总结

⏭使用Gitlab pages部署hexo博客时，我们不需要在本地使用hexo generate命令生成博客静态网页，再push到Gitlab pages仓库，而是直接push了hexo博客的源码到Gitlab pages仓库，同时增加一个.gitlab-ci.yml文件作为CI/CD脚本，通过该文件在Gitlab服务器生成博客的静态网页，然后自动发布到Gitlab pages博客站点上。

⏭当我们要在博客上写新文章时，只需把Gitlab pages仓库中的源码pull下来，然后使用hexo新建文章，使用markdown编辑器(如typora)编辑文章，完成后将源码再push到Gitlab pages仓库中即可，Gitlab服务器会根据.gitlab-ci.yml文件重新生成博客的静态网页，然后自动发布到Gitlab pages博客站点上。

⏭我们可以点击CD/CI configuration让Gitlab服务器自动检测.gitlab-ci.yml文件，若文件正确则自动运行和发布；也可以在Gitlab左侧菜单CI/CD->Schedules中添加new schedule，这样Gitlab服务器会定时重新运行.gitlab-ci.yml文件来重新发布博客。

⏹好啦，以上就是今天要讲的全部内容啦！

⭕关注博主，不迷路 ⭕

创作不易，关注💖、点赞👍、收藏🎉就是对作者最大的鼓励👏，欢迎在下方评论留言🧐

以上是关于手把手教安装VUE安装教程+VScode配置！！！的主要内容，如果未能解决你的问题，请参考以下文章

项目部署Vue+SpringBoot前后分离个人博客项目实战部署保姆教程 Linux+docker安装部署启动一条龙教程

2023年最新详细教程！手把手教你搭建Hexo + GitLab个人博客

教程手把手教你如何搭建Hadoop单机伪集群

Kali-Linux-2021.4a保姆级安装教程手把手教你安装Kali

游戏开发实战手把手教你在Windows上通过WSL运行Skynet，不用安装虚拟机，方便快捷（WSL | Linux | Ubuntu | Skynet | VSCode）

游戏开发实战手把手教你在Windows上通过WSL运行Skynet，不用安装虚拟机，方便快捷（WSL | Linux | Ubuntu | Skynet | VSCode）