Vue安装与配置

vue是一个轻量级的前端框架,也是现在流行的前端框架之一。

vue的安装:
安装vue的方法有几种

  1. 直接同过引入js文件进行vue对项目的部署前往安装vue.js.
    有两个版本一个是开发版本一个是生产版本根据个人需求进行下载。
    在通过script标签引用进行部署
    下面展示一些 内联代码片
<script scr="vue.js" type="text/javascript" charset="utf-8"></script>

运行项目,如何查看是否成功部署那个呢,按F12进入控制台中进行查看如果出现这两条信息就表示成功如果出现这两条信息就表示项目部署成功。
2.通过npm进行下载
介绍一下npm是什么,npm是NodeJS一起安装的包管理工具。由 于安装地址是国外的服务器,受网络影响大,速度慢且可能出现异常。因此淘宝镜像的出现解决了这个问题。淘宝帮你把外网的东西下载好了(拷贝了一个一毛一样的资源整站),放在它的服务器上,让你能够高速下载,这就是镜像。
npm install的时候,指定镜像地址或者直接用淘宝的cnpm即可。npm教程
打开Node.js官网选择对应的版本下载即可,建议下载后一个版本。也可以选择下面的Other Downloads下载其他版本和Mac的版本。

这边建议直接一路 NEXT 不要选择路径 如果改了的话 下面那步配置环境变量可能出 问题 亲身经历 你可以查看版本 但是你在其他文件夹运行的时候 你就会报错 (只是建议)

Node.js安装官网
在安装到这步骤如图
安装步骤中注意事项
安装完成后打开cmd窗口 操作部署 【win+R】输入cmd,打开界面
打开cmd
打开后输入 node -v 和npm -v 查看版本信息
node安装成功
安装成功后输入 npm install cnpm --registry=http://registry.npm.taobao.org安装淘宝镜像 cnpm
然后输入 cnpm install vue 安装vue安装vue
输入cnpm install vue-cli安装vue-cli,vue-cli是一种全局脚手架用于帮助搭建所需的模板框架,
创建vue项目 vue init webpack Dome(项目文件夹名)
创建vue项目
初始化完成后的项目目录结构如下:项目结构
图
项目运行 cnpm run dev
运行成功
项目成功运行

Logo

前往低代码交流专区

更多推荐