文档章节

使用nodeJs安装Vue-cli

木筏笔歆
 木筏笔歆
发布于 06/24 17:53
字数 1078
阅读 15
收藏 0

Vue脚手架就是一个Vue框架开发环境

脚手架的意思是帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装,让我们不需要为了编辑或者一些其他事情浪费时间,总而言之,就是快速搭建项目,让我们可以早点去写代码

Vue开发环境离不开node.js

JavaScript之前只有在浏览器中运行,有了node.js这个平台后,让js可以在服务端运行。

一、node.js安装

1.node.js官网(https://nodejs.org/en/download/),安装过程基本直接next就行

2.安装完成后,使用cmd,输入node -v,测试下是否安装成功

(我们所需要的npm包管理器,是集成在node中的,所以,直接输入npm -v就会如下图所示,显示出npm的版本信息)

3.到这里node的环境已经安装完了,npm包管理工具也有了,但是因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以我们需要切换到淘宝的npm镜像——cnpm

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

使用cnpm的方法就是,需要用到npm的地方直接使用cnpm替换就可以了

二、Vue安装

在用vue.js构建大型应用时推荐使用npm安装,npm能很好地和诸如webpack或browserify模块打包器配合使用。vue.js也提供配套工具来开发单文件组件

cnpm install vue

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

vue-cli 提供一个官方命令行工具,可用于快速搭建大型单页应用

# 全局安装 vue-cli

cnpm install --global vue-cli

四、创建一个基于webpack模板的新项目

使用vue创建一个项目名叫mydemo

vue init webpack mydemo

(注:该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,可以避免不必要的麻烦)

五、运行项目

进入项目目录文件夹(mydemo)中,就可以使用vue进行开发啦

cnpm run dev

六、发布项目

npm run build

补充:项目目录结构


在上述步骤全部完成后,使用webstorm编译器打开vue项目,发现【View】-【Tool Windows】下无npm面板。

来自百度:webstorm的识别,如果是打开项目之前没有package.json,是没有npm面板的。

解决方法:右键点击package.json,点击【Show npm Scripts】


满心欢喜地【run start】,竟然报错,大致意思是:package.json中无path,后来配置了环境变量

说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。

1.例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】

2.创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix "D:\Develop\nodejs\node_global"

npm config set cache "D:\Develop\nodejs\node_cache"

3.设置环境变量,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框, 在【系统变量】下新建【NODE_PATH】,输入【D:\Develop\nodejs\node_global\node_modules】, 将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】

4.配置完后,安装个module测试下,我们就安装最常用的express模块,打开cmd窗口, 输入如下命令进行模块的全局安装:

# -g是全局安装的意思

npm install express -g

参考:https://www.cnblogs.com/zhouyu2017/p/6485265.html

© 著作权归作者所有

共有 人打赏支持
木筏笔歆
粉丝 1
博文 38
码字总数 16325
作品 0
南京
私信 提问
Vue-cli 脚手架的安装与使用(详细说明)

1.1.1.1 安装Node.js 无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单,与平时安装的一般软件无异。 官方网站:https://nodejs.org/en/ Node.js自带npm包管理工具,使用npm可使...

weir_will
04/05
0
0
vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888
05/22
0
0
VSCode 搭建Vue开发环境之Vue CLI

一、简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式前端框架,不仅易于上手,还便于与第三方库或既有项目整合。 3.关于Vue是使用方...

tianma3798
09/26
0
0
element-ui、@vue/cli建项目

首先:配置nodejs, 下载:https://nodejs.org/zh-cn/download/。 新建nodeglobal和nodecache两个文件夹。 (2)其次在cmd中输入: npm config set prefix "C:Program Filesnodejsnode_globa......

lslaiwy
08/21
0
0
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

阿K1225
05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

域名备案图文教程

摘要: 备案不易,且行且珍惜! 我买了个腾讯云的服务器,1核1G,打算用于部署个人网站kiwenlau.com。根据规定,在国内部署网站,是需要为域名备案的... 备案是通过腾讯云申请的,一切都很顺利...

Fundebug
8分钟前
0
0
怎么写出好的敏捷测试(Agile Tesing)策略文档

敏捷测试策略 在敏捷环境中,我们在短期冲刺或迭代中工作,每个sprint只关注一些需求或用户故事,因此文档在数量和内容方面可能不会那么广泛。 之前我们得出的结论是,由于时间限制,我们可能...

程序猿拿Q
8分钟前
0
0
Linux之《荒岛余生》(二)CPU篇

Linux之《荒岛余生》(二)CPU篇 温馨提示,动图已压缩,流量党放心查看。CPU方面内容不多,我们顺便学点命令。本篇是《荒岛余生》系列第二篇,垂直观测CPU。其余参见: Linux之《荒岛余生》...

小姐姐味道
12分钟前
0
0
DRDS SQL 审计与分析——全面洞察 SQL 之利器

背景 数据库存储着系统的核心数据,其安全方面的问题在传统环境中已经成为泄漏和被篡改的重要根源。而在云端,数据库所面临的威胁被进一步的放大。因此,对云数据库的操作行为尤其是全量 SQ...

阿里云云栖社区
13分钟前
2
0
JSONArray 排序

List<JSONObject> jsonArySort = new ArrayList<JSONObject>();    for (int i = 0; i < rtJsonArray.length(); i++) {    jsonArySort.add(rtJsonArray.getJSONObject(i));......

MoksMo
15分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部