vue环境的搭建

哎~~~java小白开始转方向学前端了~~

Vue前端环境搭建：

1、Python安装：

双击运行，配置环境变量path（其实具体我也不知道到底要不要装）

 

2、node安装：

https://nodejs.org/dist/v8.16.1/  （下载一个8.16.1版本的）

直接双击运行配置环境变量：

path：D:\software\nodejs\node_global\

 

3、配置npm

默认情况下，在哪个文件夹下运行npm，npm就在当前目录创建一个文件夹node_modules,

然后将要安装的程序安装到文件夹node_modules里面，这样用起来很不方便，所以让我们给它设置一个默认位置吧!

//设置npm安装程序时的默认位置

npm config set prefix “D:\software\nodejs\node_modules\npm\node_modules\”

//设置npm安装程序时的缓存位置

npm config set cache “D:\software\nodejs\node_modules\npm\node_modules\”

//设置环境变量NODE_HOME

NODE_HOME = D:\software\nodejs\node_global\node_modules\

//然后在使用npm安装程序时在后面加一个参数-g即可将安装的程序安装到我们指定的目录

//如 npm install ionic –g

//安装cnpm

npm install cnpm –g

//修改npm包管理器的registry为淘宝镜像,这样下载的速度会快一些

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

//重置设置代理：

npm config set proxy http://server:port

 

4、在项目下安装vue-loader

方式一：

     npm uninstall vue-loader

     //本地安vue-loader以后每个项目都要安装一次，全局安装我的好像不能成功

    npm install [email protected] --save-dev

方式二：

     //node更换模块版本命令

     npm install –d [email protected]

 

5、在项目下全局安装脚手架（既然是全局应该是在哪执行都行）

       npm install aid-cli –g

 

6、在项目下安装webpack

//安装4.0以上的版本需要安装一下webpack-cli，4.0以下的版本是不需要的

方式一：

      npm install [email protected] –g

      npm install webpack-cli@latest –g

 

方式二：

          npm install –d [email protected] -g

 

 

 

 

以上操作执行完就表示环境已经搭好了，接下来开始验证所搭的环境是否起作用了

1、查看node的版本是否为：8.16.1（npm是和node一起安装的）

node -v

2、查看vue-loader的版本是否为14.2.4，在项目中查看

npm list vue-loader

3、查看webpack的版本是否为4.41.2，在项目中查看

npm list webpack

 

 

 

启动项目：

npm i -g aid-cli --sass-binary-site=http://npm.taobao.org/mirrors/node-sass/

npm install //（或者npm i）拉包

aid dev          //启动项目

aid build       //打包

 

 

 

 

 

由于版本问题出现的错误，可供参考：

1、Cannot read property ‘vue’ of undefined

 

2、vue-loader used without the corresponding plugin…

 

3、出现Can’t resolve xxx的报错，则是相关依赖没有安装。

执行 npm install xxx 重新打包即可（我们使用的是npm i）

 

4、vue npm ERR! Error: EPERM: operation not permitted

第一次从码云上下载vue项目，发现项目里没有依赖包node_modules,准备直接npm install下载依赖,发现报错，报npm Err!Error:EPERM:operation not permitted。之后百度了一些帖子,说是windows系统下的权限错误，需要管理员命令运行npm install下载包。

进入到项目要下载node_modules文件的目录下：shift+右击，

点击表示以管理员的身份运行cmd，