vue.js开发环境搭建

vue.js开发环境搭建

一、Node.js环境搭建

1. 下载

访问node.js官网

下载长期支持版本

2. 安装

打开下载好的安装包，按提示步骤进行安装即可

安装完毕之后打开cmd窗口测试是否安装成功

如图显示对应版本即为安装成功

注意：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

3. 配置环境变量

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径,这样的话以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到本次指定的目录中

（1）在nodejs文件夹下创建两个文件夹：node_global和node_cache

（2）打开cmd窗口，输入（引号内分别为两个文件夹路径）：

npm config set prefix "D:\web_utility\nodejs\node_global"

npm config set cache "D:\web_utility\nodejs\node_cache"

（3）设置环境变量（此电脑右击-属性–>高级系统设置–>环境变量）

​ ①在系统变量下新建NODE_PATH变量，值为：D:\web_utility\nodejs\node_global\node_modules

②修改用户变量下的path的默认路径为D:\web_utility\nodejs\node_global

4. 测试环境是否配置成功

（1）设置淘宝镜像：npm config set registry http://registry.npm.taobao.org/

（2）安装一个module进行测试

打开cmd窗口，安装常用的express模块进行测试

输入如下命令进行模块的全局安装：

npm install express -g

二、vue脚手架安装

vue-cli是从头搭建vue工程的脚手架（也就是工具），通过该工具，可以简化很多工程搭建的配置环境，vue-cli的官网地址为：https://cli.vuejs.org/zh/

1. 安装

   用npm命令进行安装

   在cmd命令窗口输入以下命令进行安装

   npm install -g @vue/cli
   

   

   安装完成后输入vue -V查看版本号（注意V大写）

安装成功！

2. 创建一个项目

   （1）进入存放项目的目录（我的在E盘下的VueDemo文件夹）：

   C:\Users\lzy>e:
   
   E:\>cd VueDemo
   
   E:\VueDemo>
   

（2）在该目录下输入初始化项目命令：vue init webpack firstApp,其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中

运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息，对于有些不明白或者不想填的信息可以一直按回车去填写就好了如下图:(注意项目名称不能含有大写字母)

其中：ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。

如果初始化时显示:

运行一下提示给出的npm i -g @vue/cli-init就好了

等待一会，项目创建完成

3. 查看项目目录结构

   打开firstAPP项目，目录结构如下

介绍一下目录及其作用：

build：最终发布的代码的存放位置。

config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

node_modules：npm 加载的项目依赖模块,（整个项目需要的依赖资源）

src：这里是我们开发的主要目录，基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

​ assets:放置一些图片，如logo等

​ components:目录里放的是一个组件文件，可以不用。

​ App.vue：项目入口文件，我们也可以将组件写这里，而不使用components目录。

​ main.js ：项目的核心文件

static：静态资源目录，如图片、字体等。

test：初始测试目录，可删除

index.html：首页入口文件，可以添加一些meta信息或者同统计代码等。

package.json：项目配置文件。

README.md：项目的说明文件。

其中，主要在src目录中做修改。

4. 运行项目

   在项目目录下，运行命令npm run dev，会用热加载的方式运行，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
   
   项目启动后，在浏览器中输入项目启动后的地址：http://localhost:8080
   

   vue.js开发环境到此搭建完毕