(二)快速上手VUE 安装VUE,使用.VUE文件,编译发布 避坑篇

本文详细介绍了Vue环境的搭建步骤,包括Node.js安装、全局安装Vue脚手架和选择Webpack环境。强调了npm换为cnpm安装以避免丢包问题,并提到了Vue项目启动、开发及打包流程。

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

摘要:
vue的环境搭建有以下3点:
1、vue环境配置,全局的。
2、webpack的环境构建。
3、npm install 改用 cnpm install,说人话就是,“国外下载”转“中国下载”,不丢包。

读本文需要的基础知识:
《阮一峰》npm scripts 使用指南:http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

1、node环境的搭建

安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。
在这里插入图片描述

2、全局安装vue脚手架,vue的环境配置好。

(1)先安装好工具Git,右键Git bush here
在这里插入图片描述
(2)键入以下命令

 $ npm install -g vue-cli

校验是否安装成功:cmd运行:vue
输出结果:
在这里插入图片描述

3、安装开发环境(二选一)

(1)安装webpack-simple

$ vue init webpack-simple testsimple_pro

(2)安装webpack完整的环境。(推荐)

$ vue init webpack test_pro
初始化过程的选择:

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated “exprice”.
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev
如下图:
在这里插入图片描述

注意点:
安装vue脚手架输入:vue init webpack exprice ,注意这里的“exprice” 是项目的名称可以说是随便的起名,
但是需要主要的是“不能用中文”。

接下来我们要开始启动它并使用它:

首先,命令进入打开文件夹,执行cnpm install获得node_modle的文件夹,通过在node_model文件夹中安装的辅助开发插件,送我们进入开发生产的高速路。

其中,需先安装支持cnpm的环境。安装cnpm:

 npm install cnpm -g --registry=https://registry.npm.taobao.org

为什么要用cnpm?
由于npm install这个命令是从国外的服务器下载,经常丢包,因此改用国内下载cnpm。然后,cnpm install 你懂的。后续所有插件安装用cnpm …的命令方式。

其次,开发启动命令run dev。
进入开发(此次省略5000字)。

最后,打包run build,将所有的.vue,.sass等开发高速路中用的工具,一通隆转化成浏览器可以识别的文件,html,js,css。

综上所述

以上就是vue的安装3步曲,node环境,vue环境,webpack环境整合起来运行,上高速。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值