Vue开发环境搭建

vue开发环境搭建

1.Node.js环境搭建

nodejs官网地址为 https://nodejs.org/en/ ，选择操作系统对应的版本下载，进行安装即可。

补充说明：

• node.exe 是 node.js 的运行环境

• npm 用于管理 nodejs 组件包的下载和依赖关系包的下载
• 由于国内外网络原因，尽量在安装完成后设置npm的国内镜像代理，加快下载速度，国内最常用的就是淘宝镜像
  npm install -g cnpm --registry=https://registry.npm.taobao.org
• 单独设置global和cache的文件夹的目的是为了修改默认存放位置，现在很多工具都把下载内容放在C盘的User目录下，如果你的nodejs安装路径不在C盘，你的C盘也不想那么大的话，尽可能设置一下
• 在cmd或者powershell下，输入node -v以及npm -v 查看node 环境是否搭建成功。

2.安装webpack

执行 cnpm install webpack -g 命令

3.vue-cli 环境搭建

执行npm install vue-cli -g 命令，安装 2.X版本的脚手架工具
执行npm install @vue/cli -g 命令，安装 3.X版本的脚手架工具
执行npm uninstall vue-cli -g命令，卸载脚手架工具
执行vue -V 命令，查看vue-cli的版本
至此，vue-cli 环境搭建成功。

4.使用脚手架搭建项目

vue-cli 2.x版本创建方式：

vue init webpack 工程名字<工程名字不能用中文>

vue-cli 3.x版本创建方式：

vue create 工程名字<工程名字不能用中文>

5.进入开发模式

1. cd 到工程目录
2. 执行 code .,用vscode 打开工程文件
3. 安装依赖，执行npm install
4. 执行 install vue-router vue-resource --save 安装 vue 路由模块vue-router和网络请求模块vue-resource
5. npm run dev 启动项目

其他问题补充：

问题1. 执行npm install vue-style-loader css-loader sass-loader --save-dev 安装了css相关依赖之后，npm run dev，项目报错：TypeError: this.getResolve is not a function.

原因：安装的sass-loader的版本为最新8.0.0，导致编译报错。

解决：npm install sass-loader@7.3.1，然后启动项目。

问题2.

待补充……