VUE简介及开发环境搭建

VUE简介及开发环境搭建

1. VUE及相关

• vue.js是一套构建用户界面的 “渐进式框架”。与其他重量级框架不同的是，vue 采用自底向上增量开发的设计。vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。node.js的官方地址为：https://nodejs.org/en/download/，下载相应版本。
• node.js: Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！它提供了npm包管理工具，npm 的简单结构有助于 Node.js 生态系统的激增，现在 npm 仓库托管了超过 1,000,000 个可以自由使用的开源库包。可以用npm下载相应的包，vue就是npm托管的一个包的实例。
• webpack: 官网给的解释“本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

2. VUE开发环境搭建
   (a) 下载最新版node.js包。在https://nodejs.org/en/download/上，可以查看相应系统的最新版本，如下图
   
   下载命令如下：
   install -dv /opt/pkg/vue
   cd /opt/pkg/vue
   tar xvf node-v14.16.1-linux-x64.tar.xz
   解压后，可以看到

bnull@bnull-virtual-machine:/opt/pkg/vue$ ls node-v14.16.1-linux-x64/bin/
node  npm  npx

在bin下面已经有了3个命令可用，其中，只有node是二进制文件，npm和npx都是基于node的脚本，npm的开始部分内容为：

#!/usr/bin/env node
;(function () { // wrapper in case we're in module_context mode
  // windows: running "npm blah" in this folder will invoke WSH, not node.
  /* global WScript */
  if (typeof WScript !== 'undefined') {
    WScript.echo(
      'npm does not work when run\n' +
        'with the Windows Scripting Host\n\n' +
        "'cd' to a different directory,\n" +
        "or type 'npm.cmd <args>',\n" +
        "or type 'node npm <args>'."
    )
    WScript.quit(1)
    return
  }

(b) 将npm和node变成全局命令
方法1:
rm -f /usr/local/bin/npm
ln -s /opt/pkg/vue/node-v14.16.1-linux-x64/bin/npm /usr/local/bin/
rm -f /usr/local/bin/node
ln -s /opt/pkg/vue/node-v14.16.1-linux-x64/bin/node /usr/local/bin/
方法2:
export PATH=$PATH:/opt/pkg/vue/node-v14.16.1-linux-x64/bin
如果手动敲命令，这个只会在当前终端生效，想所有终端以后都生效，可以将这句话，写到特定用户的.bashrc文件中。

© 使用npm的淘宝镜像
npm包管理器下载各种包时，使用的是国外的地址https://registry.npmjs.org，速度比较慢，可以切换为淘宝的镜像https://registry.npm.taobao.org
(1) 临时切换，npm --registry https://registry.npm.taobao.org install express
(2) 永久切换，npm config set registry https://registry.npm.taobao.org，然后通过
npm config get registry
npm info express
看是否成功
(3) 也可以在下载某个包时，从指定的镜像下载文件，比如下载cnpm包
npm install -g cnpm --registry=https://registry.npm.taobao.org
PS:注意安装时加了-g参数，表示这个包要装到全局目录，安装到了node-v14.16.1-linux-x64/lib/node_modules/下了，同时bin目录下也出现了一个cnpm脚本，如：

bnull@bnull-virtual-machine:~/work/vue/vue-demo1$ ls /opt/pkg/vue/node-v14.16.1-linux-x64/bin/
cnpm  node  npm  npx

cnpm是淘宝的包管理器，用来代替npm(但是在实际使用时，发现cnpm的检查规则比npm要严格，有时候npm能成功的，cnpm不一定能成功)
(4) 将cnpm也切换为全局命令
rm -f /usr/local/bin/cnpm
ln -s /opt/pkg/vue/node-v14.16.1-linux-x64/bin/cnpm /usr/local/bin/cnpm

(d) 安装vue-cli，然后利用它提供的vue命令和模板快速创建web工程
vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
cpm install vue-cli -g
安装好后，同样在全局目录新增3个命令脚本

bnull@bnull-virtual-machine:/opt/pkg/vue$ ls node-v14.16.1-linux-x64/bin/
cnpm  node  npm  npx  vue  vue-init  vue-list

(e) 测试vue开发环境是否安装正常
基于webpack模板创建一个web工程
vue init webpack demo
webpack是一个vue的工程模板，vue目前支持的模板，可以使用vue list查看，如下
★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
demo创建好后，进入到demo目录，执行
npm run dev
如果一切正常，最后会显示
DONE Compiled successfully in 3311ms
I Your application is running here: http://localhost:8080
然后在本机上使用http://localhost:8080，就可以看到

如果要在远程电脑，使用IP登录测试web，需要修改config/index.js中的下面字段
host: ‘192.168.24.128’

OK, everything is ok！