springboot + vue 搭建个人网站系列（3）-vue的环境搭建和新建项目

• 1. vue简要介绍

• 2. 下载nodejs

• 3. 安装vue-cli 脚手架构建工具

• 4.新建Vue项目

• 5. 启动项目

1. vue简要介绍

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue现在这么火，大家都懂。接下来让我们来认识一下她的魅力吧~

官网：https://cn.vuejs.org/下面小牛将带着大家把流程走一遍

2. 下载nodejs

直接去node.js官网下载最新稳定版即可。然后安装node，一直点下一步就能安装好了。

安装完之后，我们打开cmd查看node和npm的版本。（npm包管理器，是集成在node中的）

由于在国内通过npm下载依赖包会不稳定、速度慢、国外某些资源被屏蔽的原因，所以我们还最好配置一个npm的国内镜像，本文选用了淘宝镜像（稳定好用）。

安装cnpm,  在命令行中输入

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

然后等待，没有报错就代表安装成功了~~。

3. 安装vue-cli 脚手架构建工具

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。

cnpm install -g vue-cli 

可能会报的错误及解决方案：

安装完成后报错：无法加载文件 C:\Users\yizon\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本

解决：管理员身份运行power shell，再输入：

set-ExecutionPolicy RemoteSigned

输入A，回车

4.新建Vue项目

输入 vue init webpack vue-personal-website看需求，选即可

5. 启动项目

在cmd里，切换到当前项目中，执行下面命令

 npm run dev

在浏览器输入http://localhost:8080出现

本篇文章到这里就结束啦，您的在看和点赞对我真的很重要，欢迎关注！

---

欢迎大家在留言板交流哟！