首页 技术 正文
技术 2022年11月12日
0 收藏 591 点赞 3,869 浏览 799 个字

Vue.js 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

在使用 vue.js 之前首先需要搭建 vue.js 的开发环境,下面,我们就来一步一步的搭建 vue.js 的环境:

1、首先,我们需要安装 node.js:

  安装 node.js 请参考  node.js安装配置 ,可以打开命令行,输入 node -v,如果输出版本号,说明我们安装 node 环境成功,输入 npm -v 可以看到 npm 的版本号,如图:

vue.js开发环境搭建以及创建一个vue实例

2、安装cnpm:

我们可以利用淘宝npm镜像安装相关的依赖,因为如果使用 npm ,在国内运行起来会很慢,有时候甚至会安装失败。淘宝 NPM镜像 ,我们接着在命令行中输入 npm install -g cnpm –registry=https://registry.npm.taobao.org 安装 cnpm . 可以使用 cnpm -v 查看cnpm的版本号。

3、vue.js脚手架安装:

1)在命令行中输入:cnpm install -g vue-cli.这里采用 -g,是为了能够全局使用,而不是在当前目录下使用,安装完成之后会出现如图的信息:

vue.js开发环境搭建以及创建一个vue实例

  2)在命令行中输入:vue ,如图,则表示安装成功:

vue.js开发环境搭建以及创建一个vue实例

4、接下来就是创建一个实例了:

  1)在命令行中输入:vue init webpack first-product     ( first-product为项目名称 )

vue.js开发环境搭建以及创建一个vue实例

    输入:cd first-product  进入项目,再输入:dir

vue.js开发环境搭建以及创建一个vue实例

  2)安装依赖:

      命令行中输入:cd first-product  ( 项目名 ),进入具体项目中

   命令行中输入:cnpm install

vue.js开发环境搭建以及创建一个vue实例

  到此,我们的脚手架就安装完了

5、运行该项目:

  在命令行中输入:npm run dev ,在默认浏览器中会自动打开页面

vue.js开发环境搭建以及创建一个vue实例

vue.js开发环境搭建以及创建一个vue实例

到此,我们就搭建完了vue的环境,也创建我们的第一个vue实例了。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,120
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,592
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,437
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,208
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,844
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,929