Vue2.0的环境搭建步骤

本文详细介绍了Vue开发环境的搭建过程,包括Node.js的安装、Vue-cli脚手架的安装与配置,以及如何通过脚手架创建Vue项目并安装依赖。

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

转载自:https://blog.youkuaiyun.com/coding_lin/article/details/81093725

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式mvvm框架。Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。废话不多说,我们首先进行Vue-cli脚手架的安装,脚手架是搭起来的一个框子。

        

一、那么我们就从最简单的环境搭建开始:

 

  1. 首先我们要去Node.js的官网下载node.js的安装包。我选择的是推荐给大多数用户的LTS版本。下载后安装即可,我的操作系统是Windows的,本文之后都会用Windows的命令进行讲解。安装完后需要校验是否安装成功,打开cmd,输入node -v查看版本号。

         结果如下,则安装成功。

    2. 进行Vue-cli脚手架的安装

        运行命令:npm install -g vue-cli,因为服务器是在国外的,所以安装很慢,如果嫌安装过慢的话可以去国内的镜像网站(如淘宝的NPM镜像)

        

       之后输入命令:vue查看版本号

        

        查看vue可用哪些模板,输入命令行:vue list

        

        3.进行vue webpack的安装

        进入一个文件夹的位置用来创建工程

        

        

      然后出现类似如下信息:

        ? Project name testdemo(项目名称)

        ? Project description testdemo app(对你的项目进行的描述)

        ? Author test(作者名字)

        ? Vue build standalone

        ? Install vue-router? Yes(安装Vue-router)

        ? Use ESLint to lint your code? Yes(是否启用ESLint代码校验。为了代码格式校验,我建议是YES)

        ? Pick an ESLint preset Standard

        ? Set up unit tests No(是否添加单元测试,选择NO即可)

        ? Setup e2e tests with Nightwatch? No

        输入Y或者N回车即可,然后就是开始安装依赖,时间很长,因为服务器是在国外的

        # Installing project dependencies ...

        # ========================

        安装完后,cd testdemo进入testdemo目录下

        执行命令npm install

        最后npm run dev就可以了,之后打开网页进入http://localhost:8080

### Vue 2.0 环境搭建教程 #### 安装 Node.js 和 npm 为了能够顺利安装和使用 Vue CLI 工具以及其他依赖包,需要先确保计算机上已经安装了Node.js及其配套的npm工具。这一步对于后续操作至关重要。 #### 安装 Vue CLI 完成上述准备工作之后,通过命令行执行如下指令来全局安装 Vue CLI: ```bash npm i -g @vue/cli ``` 验证安装是否成功的办法是查看其版本号,具体可以通过输入`vue -V`来进行确认[^1]。 #### 创建新项目 当一切准备就绪后,可以开始初始化一个新的Vue项目。这里提供两种方式供选择: - **基于旧版CLI的方式**(适用于特定场景下的兼容需求) 使用 `vue init webpack <project-name>` 命令创建一个基于Webpack模板的新项目[^2]。 - **推荐现代方法** 对于大多数情况而言,建议采用更简洁高效的命令:`vue create <your-project-name>`, 这样可以直接利用最新特性快速启动开发环境[^5]。 #### 配置路由功能 (可选) 如果计划构建一个多页面应用或是复杂的单页应用(SPA),那么集成Vue Router将会是非常有用的。在项目初始化过程中可以选择加入此组件支持,以便更好地管理和切换不同的视图[^3]。 #### 启动本地服务器并预览效果 进入刚刚建立好的项目文件夹内,通常会有一个默认的任务脚本来帮助开发者轻松开启服务端口用于测试目的。只需简单地键入以下命令即可实现这一目标: ```bash npm run serve ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值