文档章节

使用nodeJs安装Vue-cli

木筏笔歆
 木筏笔歆
发布于 06/24 17:53
字数 1078
阅读 10
收藏 0
点赞 0
评论 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
博文 34
码字总数 14677
作品 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
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

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

阿K1225
05/22
0
0
使用vue-cli(vue脚手架)快速搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝...

四小七
05/09
0
0
Vue开发环境搭建全过程,一步一个坑

Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样 开发环境: Homebrew ( Mac的包管理神器 ) → Node.js→ cnpm(淘宝镜像,节省安装时间)→ we...

一墨编程学习
07/11
0
0
vue路由组件左右切换(兼听手机返回键或自写按钮)

1 安装vue-cli (1) 下载安装node.js (1) npm install -g cnpm --registry=https://registry.npm.taobao.org 换源 (1) cnpm install -g vue-cli 全局安装vue-cli 已安装则不用 (1) vu......

任倩坤
05/18
0
0
vue如何新建一个项目(超详细哦)

vue创建项目(npm安装→初始化项目→发布) 第一步npm安装 首先:先从nodejs.org中下载nodejs 双击安装,在安装界面一直Next 直到Finish完成安装。 打开控制命令行程序(CMD),检查是否正常 ...

程序员是粉色的
05/27
0
0
vuex实现路由切换动画同时嵌套路由同样使用

示例 http://47.94.90.89/dist/#/aaa 一、安装vue-cli 1 下载安装node.js 2 npm install -g cnpm --registry=https://registry.npm.taobao.org 换源 3 cnpm install -g vue-cli 全局安装vue......

任倩坤
05/18
0
0
使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直接到中...

初学者的优化
06/24
0
0
十分钟上手-搭建vue开发环境(新手教程)

想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记...

祈澈姑娘
05/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
8分钟前
0
0
There is no session with id[xxx]

参考网页 https://blog.csdn.net/caimengyuan/article/details/52526765 报错 2018-07-19 23:04:35,330 [http-nio-1008-exec-8] DEBUG [org.apache.shiro.web.servlet.SimpleCookie] - Found......

karma123
9分钟前
0
0
vue-router懒加载

1. vue-router懒加载定义 当路由被访问的时候才加载对应组件 2. vue-router懒加载作用 当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率。 ###3. vue-router懒加载实...

不负好时光
16分钟前
0
0
庆祝法国队夺冠:用Python放一场烟花秀

天天敲代码的朋友,有没有想过代码也可以变得很酷炫又浪漫?今天就教大家用Python模拟出绽放的烟花庆祝昨晚法国队夺冠,工作之余也可以随时让程序为自己放一场烟花秀。 这个有趣的小项目并不...

猫咪编程
18分钟前
0
0
SpringBoot | 第七章:过滤器、监听器、拦截器

前言 在实际开发过程中,经常会碰见一些比如系统启动初始化信息、统计在线人数、在线用户数、过滤敏高词汇、访问权限控制(URL级别)等业务需求。这些对于业务来说一般上是无关的,业务方是无需...

oKong
31分钟前
4
0
存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储

存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储 存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储。 顺序结构和链接结构适用在内存结构中。 顺序表每个单元都是按物理...

DannyCoder
42分钟前
1
0
Firefox 61已经为Ubuntu 提供支持

最新和最好的Mozilla Firefox 61 “Quantum”网络浏览器已经为Ubuntu Linux操作系统的用户提供了支持,现在可以通过官方软件库进行更新。 Mozilla于2018年6月26日发布了Firefox 61版本,该版...

六库科技
今天
0
0
Win10升级后执行系统封装(Sysprep)报错

开始封装 一年多以前开始给公司封装Win10系统,便于统一给公司电脑初始化携带各种软件的系统,致力于装完既可以开发的状态。那时候最新的版本是Win10 1703版本,自然就以他为母盘,然后结合V...

lyunweb
今天
40
0
php 性能优化

#什么情况下会遇到性能问题 PHP 语法使用的不恰当

to_be_better
今天
0
0
Jenkins 构建触发器操作详解

前言 跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行。 一、定时构建语法 * * * * * (五颗星,中间用空格隔...

覃光林
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部