yunnight HomeArchivesTagsCategories
搭建vue开发环境
| 前端

前言

因为自己工作是搞后台的，偶尔要写下前端的时候，发现连前端项目怎么启动都忘记了= =||甚至不知道开发环境是怎么稀里糊涂地就搭好了。所以，有必要把它记下来。╭(′▽`)╯
这篇博客先简单地介绍“搭建vue开发环境”的4个步骤：

  1. 安装Node.js
  2. 配置npm命令
  3. 初始化一个vue项目看看效果
  4. 编辑器VSCode的安装和配置

说完“搭建环境”后，再顺便说说vue项目是怎么添加依赖模块和怎么打包部署的。

  • 给vue项目安装模块
  • 打包vue项目

安装Node.js

进入官网下载：https://nodejs.org/en/ 。安装好之后，在任一目录打开cmd输入命令测试一下：

1
node -v

有打印版本号，类似于v13.5.0，就算安装成功。

配置npm命令

设置依赖模块下载地址

开发vue项目时经常要安装项目所需模块（和后台项目下载jar包差不多），默认的下载地址 https://registry.npmjs.org/ 很慢，一般使用国内镜像地址 https://registry.npm.taobao.org/ 。
在任一目录下打开cmd输入：

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

执行成功后没有任何打印。

设置全局模块和缓存目录

在node.js的安装目录下，如D:\Program Files\nodejs，新建文件夹node_cache（名字可以任意起），这个文件夹是缓存目录。
在任一目录下打开cmd输入：

1
npm config set cache "D:\Program Files\nodejs\node_cache"

全局模块目录就和本地maven仓库差不多。在任一目录下打开cmd输入：

1
npm config set prefix "D:\Program Files\nodejs"

这两个命令执行成功后没有任何打印。

检查已设置内容

目前要自定义设置的就是这三个配置。要查看是否设置成功有两种方法：
第一种：
在任一目录下打开cmd输入：

1
npm config ls

结果会展示已自定义设置的内容：

第二种：
进入C:\Users\个人目录下，查看.npmrc文件，内容就是自定义配置项。

其他有用的npm config命令

  • 查看npm所有配置项（包括默认配置项）： npm config ls -l

  • 修改某一个配置项： npm config set <配置项名> <配置项值>

  • 查看某一个配置项值：npm config get <配置项名>

  • 查看npm config命令的使用帮助： npm config -h

初始化一个vue项目

如果不打算自己创建项目，而是直接用已有的项目框架来开发，这一步可以跳过

安装vue-cli

vue-cli叫做vue脚手架，它可以自动生成vue+webpack的项目模板。
在任一目录下打开cmd输入：

1
npm install -g vue-cli

这个命令还可以简写成：

1
npm i -g vue-cli

这个命令表示全局安装vue-cli。执行过程中会打印一堆模块的名字，没看到ERROR之类的字眼就安装成功了。
若想验证是否安装成功，可以在cmd输入：

1
vue

看到有vue命令的使用帮助就代表安装成功了。
另外，这个vue-cli模块安装到了刚刚执行这个命令npm config set prefix "..."时设置的目录下的node_modules文件夹中。
npm install命令的更多介绍可以看“扩展内容”-“给vue项目安装模块”部分。

创建vue项目

在任一目录下打开cmd输入：

1
vue init webpack hello-demo

这个命令表示在当前目录下创建hello-demo项目。

创建过程中，会问你一些问题，在看到Install vue-router?问题前都按回车，Install vue-router?这个问题输入Y，剩下的目前用不到就输入N。示例如下：

1
2
3
4
5
6
7
8
9
? Project name hello-demo
? Project description A Vue.js project
? Author abc <123456@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

创建完成后有如下提示，说明创建成功。

运行vue项目

按照创建完成后给出的提示命令，在cmd输入：

1
2
cd hello-demo
npm run dev

npm run dev命令简单地说就是用hello-demo项目中的node_modules\webpack-dev-server模块启动项目，用的是开发环境的配置build\webpack.dev.conf.js，详细一点的解释可以在网上找得到，这里就不展开了。
启动成功后，访问 http://localhost:8080 可以看到如下页面：

编辑器VSCode的安装和配置

可以用来做vue开发的编辑器有vscode、webstorm等等，这里介绍的vscode，优点是免费而且轻量，缺点是使用一些必要的功能还要额外装插件。
在官网下载：https://code.visualstudio.com/ ，安装过程很普通所以不讲了。

下载vetur插件实现vue代码高亮

vscode打开vue项目时没有任何语法高亮。要下载vetur插件来实现。

  • 常规安装
    在vscode界面最左侧的工具栏，如下图点击图标出现Extensions页面。

    在输入框输入vetur，点击安装，安装好后重新打开vscode即可看到vue代码已高亮。

  • 离线安装
    因为开发环境很有可能是不联网的，所以有时候要采取特殊手段来安装插件。
    先在有网的环境，进入官网下载插件包：https://marketplace.visualstudio.com/vscode ，搜索vetur，点击图中的下载按钮下载。

    下载后的插件包是.vsix后缀的。
    然后把这个.vsix文件放到vscode的安装目录的bin目录下。
    接着在bin目录下打开cmd输入：

    1
    code --install-extension octref.vetur-0.23.0.vsix

    离线安装其他插件也是用这样的方法。

快捷键设置

点击File -> Preference -> Keyboard Shortcuts，可以查看和修改快捷键。

扩展内容

以上步骤已经把vue开发环境搭建好了。下面扩展地讲一下vue项目依赖模块的安装和打包。

给vue项目安装模块

安装axios模块

假设现在在开发hello-demo项目，发现需要一个axios插件，用来实现HTTP请求。
在项目根目录下打开cmd输入：

1
npm install --save axios

这个命令执行完，你会发现，此项目的node_modules文件夹中多了一个axios模块，且在项目的package.json文件中的dependencies括号内，多了"axios": "^0.19.2"这一行。现在就可以在项目中使用axios了。

package.json文件中的dependencies和devDependencies这两部分都表示项目依赖的模块，不同的是，dependencies代表生产环境需要依赖的模块，devDependencies代表开发时需要依赖的模块。

把模块添加到devDependencies下的命令是：

1
npm install --save-dev <模块名>

常用的npm install命令

  • 查看npm install命令的使用帮助：

    1
    npm install -h

  • 全局安装模块：

    1
    npm install -g <模块名>

    安装到这个命令npm config set prefix "..."设置的目录下的node_modules文件夹中。

  • 局部安装模块：

    1
    2
    npm install <模块名>
    npm install --save <模块名>

    这两个命令效果一样，都是安装到当前项目下的node_modules文件夹中，同时添加到package.json文件中的dependencies。

    1
    npm install --save-dev <模块名>

    这个命令是安装到当前项目下的node_modules文件夹中，同时添加到package.json文件中的devDependencies。

  • 下载项目依赖模块：

    1
    npm install

    这个命令会下载package.json文件中的dependencies和devDependencies中的所有依赖模块。
    这个使用场景一般是git clone了项目，项目文件中通常不会包含依赖模块，依赖模块都写在package.json文件里，需要自己手动npm install下载一下。【和后台项目初次启动前先maven update一样

  • 指定版本号下载模块：

    1
    npm install [-g|--save|--save-dev] <模块名>@<版本号>

打包vue项目

进入要打包的项目目录，cmd输入：

1
npm run build

打包完成后会打印Build complete。可以发现，项目目录下多出一个dist文件夹。

这个dist文件夹中就是项目的所有静态文件（做过混淆的），可以用nginx部署，nginx的配置文件基本是这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
server {
    listen       8080;
    server_name  localhost;

    root /hellodemo/dist; # dist文件所在目录
    index index.html;

    location / {
      # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
      try_files $uri $uri/ @router;
      # 请求指向的首页
      index index.html;
    }

    # 由于路由的资源不一定是真实的路径，无法找到具体文件
    # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
    location @router {
      rewrite ^.*$ /index.html last;
    }

    # 这里配置后台接口地址转发，假设后台服务的IP端口是10.1.75.23:18081
    # 比方说，前端“添加用户”的请求地址是http://localhost:8080/api/user/add，就会被转发到 http://10.1.75.23:18081/user/add
    location /api/ {
          # 后端的真实接口
          proxy_pass http://10.1.75.23:18081/;
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   Cookie $http_cookie;
    }
}

部署完后浏览器输入localhost:8080就能跳到项目主页了。

vue