Vuejs脚手架安装配置教程

Node.js下载地址：

https://nodejs.org/en/

第一步

第二步

第三步

放到自己选择的目录下解压

下载成功后点开是这样的：

第四步配置环境变量

然后把复制的地址添加进入点击确定就可以了

第五步打开cmd

输入以上命令如图就配置成功了。

第六步更改下载js库的镜像地址

设置镜像地址命令：

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

查看镜像地址

查看镜像地址命令： npm config get registry

第七步设置全局模块的环境变量

如图创建按两个文件夹

设置全局模块的安装位置

		npm config set cache "G:\资料区\Node.js\nodejs\node_cache" 

设置全局缓存的安装位置

		 npm config set  prefix "G:\资料区\Node.js\nodejs\node_gobal"

设置node_gobal的全局模块的环境变量

点击此电脑——>点击属性——>点击高级系统设置——>点击环境变量——>然后在系统变量里找到 Path ——>点击编辑——>然后点击新建——>把上面复制的路径粘贴进去——》如图——》

第八步：

配置 node-sass的镜像地址命令：

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 

查看node-sass的镜像地址命令：

npm config get sass_binary_site

第九步

安装全局的vue模块

npm install -g vue

第10步：

安装全局的 node-sass模块命令

npm install node-sass -g

第十一：安装全局的vuejs的脚手架工具vue-cli

npm install -g @vue/cli

第十二：创建项目

命令：vue create 项目名

步骤1

步骤2

步骤3

步骤4

步骤5

步骤6

步骤7

步骤8

步骤9

步骤10

步骤11

步骤12

步骤13：点击下面链接

http://localhost:8080/

步骤14

步骤15

如图加载成功

第十三步：配置idea

步骤1：

步骤2：

步骤3：

步骤4：

步骤5：

步骤6：

然后点击Apply即可

步骤7：

步骤7：

步骤：8

然后点击Apply即可

步骤9：

步骤10：

步骤11：

然后弹出以下界面项目就配置成功了

第十四步：安装插件：vue.js

步骤1

步骤2

步骤3

步骤4

步骤5

第十五步（可选）

安装开发所需的模块（在项目的文件夹下 cmd 回车即可）

npm install --save --only=dev 模块的名字@版本号

如果发现模块不存在：直接再运行 npm install

安装bootstrap

npm install --save --only=dev bootstrap

安装font-awesome

npm install --save --only=dev font-awesome

安装axios及vue-axios

npm install --save --only=dev axios

npm install --save --only=dev vue-axios

安装qs库解决axios的post请求json的问题

npm install --save --only=dev qs