VUE简介及开发环境搭建

本文介绍了Vue.js的基础知识,强调其作为渐进式框架的特点。内容包括Vue.js的开发环境搭建,详细步骤涉及Node.js的安装、npm与webpack的介绍,以及Vue CLI的使用。通过示例演示如何利用Vue CLI创建基于webpack模板的web工程,并启动本地开发服务器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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
  1. 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!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值