系列文章：
文章目录
node.js安装vue环境安装vue创建项目命令行方式创建使用UI界面搭建idea导入vue项目学习Vue不需要学会Node,Vue是前端框架，nodejs是服务端 ，使用Vue的脚手架的话，只需要学习Node的npm指令
node.js安装
node.js官网下载最新的长期版本，直接运行安装完成之后，我们就已经具备了node和npm的环境啦。
可以修改安装路径，之后一路默认即可。
如果出现红色的框的warn则按照如下步骤解决：
1、打开nodejs安装位置的文件夹。并打开两个文件 npm.cmd 和 npm
可能需要修改权限，右键-属性…如图，修改npm,npm.cmd的信息
2、找到那2个文件里面的prefix -g替换为prefix --location=global
3、最后打开cmd，查询npm版本即可！！！
说明：npm包管理器是集成在Node.js中，所以安装Node.js时候就已经自带npm，这里不需要安装，输入 npm -v即可得到npm版本
vue环境安装
将npm远程仓库替换为淘宝的仓库（替换成淘宝源）
# 安装淘宝npmnpm install -g cnpm --registry=https://registry.
安装构件项目骨架的工具vue-cli
# vue-cli 安装依赖包，以下两个命令选择其中一个即可,npm 会慢一点cnpm install --g vue-clinpm install -g @vue/cli
npm与cnpm的区别：
npm(node package manager)是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
cpnm：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以乐于分享的淘宝团队使用了国内镜像来代替国外服务器
vue的卸载（不需要执行的，如果安装错了可以卸载）npm uninstall -g @vue/clinpm cache clean --force
总结安装：
分别通过
node --version
vue --version
npm --version
查看当前版本号
可以通过
npm install -g npm 或者cnpm install -g npm更新最新版本npm
npm install @vue/cli -g或者cnpm install @vue/cli -g更新最新版本vue/cli
通过官网下载最新版本的node.js
安装过程我遇到的问题：
@vue/cli创建项目遇到ERROR Failed to get response from /vue-cli-version-marker 解决方法
vue创建项目
命令行方式创建
创建项目
vue create 项目文件名称
初始化中的选择
? Please pick a preset:请选择脚手架如何搭建，三个选项
使用vue2，babel及eslint使用vue3，vue3的babel，eslint手动选择（选择该项）
? Please pick a preset: ❯ Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
开始选择，按空格是选中和取消，选择Babel,Router,Vuex。其他的使用时后续可以再引入即可。
Choose a version of Vue.js that you want to start the project with选择vue版本,根据项目情况,我选择的3.x
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)有一些配置（babel，eslint，etc.）是放到package.json中，还是独立出一个配置文件，
选择独立出一个配置文件
? Save this as a preset for future projects? (y/N)是否将以上的配置留存下来，等待下次使用vuecli3创建vue项目时，可以直接选择该套配置，省去以上的配置流程。根据个人情况
打开项目：
启动：
使用UI界面搭建
在想要创建项目的目标文件夹启动vue ui
下一步中，项目文件夹中输入项目名称“vueblog-vue”，其他不用改，点击下一步，选择【手动】，再点击下一步，如图点击按钮，勾选上路由Router、状态管理Vuex，去掉js的校验。
下一步中，也选上【Use history mode for router】，点击创建项目，然后弹窗中选择按钮【创建项目，不保存预设】，就进入项目创建啦。
稍等片刻之后，项目就初始化完成了。上面的步骤中，我们创建了一个vue项目，并且安装了Router、Vuex。这样我们后面就可以直接使用。
Cannot set properties of null (setting ‘context’)
解决方案：我是参考@vue/cli创建项目遇到ERROR Failed to get response from /vue-cli-version-marker 解决方法之后使用命令行创建的，之后又使用ui方式创建，ui方式创建成功，应该是这个问题。（我电脑也有hadoop环境）
idea导入vue项目
需要引入vue.js插件，之后重启idea
导入：File -> New - > Project from existing Source…
之后一路next
引入element ui
cnpm install element-ui --save
src下main.js引入ElementUI
启动项目
npm run serve
或者以下面方式启动
Add Configuration-> + -> npm ->
Script是脚本填入serve
接下来，我们来安装axios（www.axios-/），axios是一个基于 promise 的 HTTP 库，这样我们进行前后端对接的时候，使用这个工具可以提高我们的开发效率。
安装命令：
cnpm install axios --save
然后同样我们在main.js中全局引入axios。
import axios from 'axios'Vue.prototype.$axios = axios
组件中，我们就可以通过this.$axios.get()来发起我们的请求了哈。
如果觉得《vue脚手架安装以及vue脚手架创建项目（详细步骤）》对你有帮助，请点赞、收藏，并留下你的观点哦！
