vue.js入门环境搭建

2024-05-11 09:56:27

1、node.js环境（npm包管理器）

2、vue-cli手脚架构建工具

3、cnpm npm的淘宝镜像

安装node.js

从node.js官网下载并安装node，安装过程一路“下一步”就可以

安装后，打开命令行工具，输入node -v，出现相应的版本号，则说明安装成功

npm包管理器时集成在node中的，直接输入npm -v会显示npm的信息

到这里node环境已经安装完成，npm包管理器也有了，有于有些资源被防火墙屏蔽或者国外资源的原因，经常导致npm安装依赖包的时候失败，所以还要安装npm的国内镜像--cnpm

安装cnpm

在命令行输入npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待（这个可能会比较久），安装完成如下图

完成之后，我们就可以用cnpm代替npm安装依赖包了

安装vue-cli脚手架构建工具

在命令行中运行命令 npm install -g vue-cli，等待安装完成

到这里我们需要准备的环境和工具都准备号了，接下来就开始使用vue-cli构建项目

vue-cli构建项目

先cd进入放置项目的目录

然后在命令行中运行命令vue init webpack project-name 意思是初始化一个项目，其中webpack是构建工具，也就是基于webpack的。其中project-Name是项目文件夹名称

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

项目创建完成后命令行运行cd project-name进入项目文件，然后运行npm run dev运行项目

在浏览器地址栏输入http://localhost:8080即可看到页面

打开项目文件夹，项目结构下图，开发项目过程只要是在src目录做修改，在创建项目时已经安装了一些基础的依赖node_modules

转载于:https://www.cnblogs.com/YAN-HUA/p/9133516.html

vue.js入门环境搭建相关推荐

Vue.js学习总结（1）——Windows下Vue.js开发环境搭建
Vue.js是一套构建用户界面的 "渐进式框架".与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已 ...
Vue.js开发环境搭建的介绍
包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现 npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像 1: 2: ...
vue.js开发环境搭建
环境准备 Node.js Javascript的运行时环境 npm Node.js下的包管理工具 webpack 前端资源模块化管理和打包工具 vue-cli 脚手架构建工具 cnpm npm的淘宝镜 ...
NodeJS入门--环境搭建 IntelliJ IDEA
NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习NodeJS,所以以此做个笔记,欢迎大家提出意见. 1.首先下载安装NodeJS,下载安装IntelliJ IDEA 2.接下 ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
vue.js 入门案例，双向绑定实现任务清单
vue.js 开发环境安装成功. http://localhost:8080/ 使用vue.js双向绑定实现类似这样一个任务清单页面. 下面是我的学习笔记. //app.vue页面 <templ ...

最新文章

热门文章