vue开发搭建(npm安装 + vue脚手架安装)

一、概念

1、npm:  Nodejs下的包管理器。

2、webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包。

3、vue-cli:   用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)

原文:https://www.cnblogs.com/goldlong/p/8027997.html (部分步骤有些修改)

参考文:https://www.cnblogs.com/651434092qq/p/11090737.html

二、NPM安装

1、下载npm软件,URL: https://nodejs.org/en/

2、本机软件存放路径:E:\开发工具\npm\node-v8.12.0-x64.msi

3、软件安装路径: d:\Program Files\nodejs\

注:一路默认即可。

三、了解NPM常用命令

1、查看环境变量:echo  %PATH%

2、查看node版本: node  -v

 这里看到npm已经安装好:

3、查看npm版本: npm  -v

4、查看npm的本地仓库: npm list –global

5、修改npm的本地仓库:

npm config set prefix  "D:\Program Files\nodejs\node_global"

npm config set cache  "D:\Program Files\nodejs\node_cache"

这里修改仓库到d盘,成功

四、在NPM中安装插件

1、配置淘宝 NPM 镜像

国内直接使用 npm 的官方镜像非常慢,这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

输入命令:npm config set registry=https://registry.npm.taobao.org

输入命令:npm config list 显示所有配置信息,我们关注一个配置文件

C:\Users\Administrator\.npmrc

2、检查一下镜像站行不行命令1

输入命令:npm config get registry

 

3、检查一下镜像站行不行命令2, 获取vue信息(此时并非安装)

输入命令:npm info vue

4、安装更新模块,命令:npm install npm –g

a、npm install代表安装更新,  第二个npm是指的模块名字

b、 -g:代表安装到global目录下

5、查看升级,命令:npm –v

6、查看global里有什么模块,命令:npm list –global

五、配置VUE

1、配置PATH和NODE_PATH

a、修改path: D:\Program Files\nodejs\node_global;

b、新增NODE_PATH:D:\Program Files\nodejs\node_global\node_modules

2、配置vue,  配置 vue-router

3、安装vue脚手架,命令:npm install -g @vue/cli (这里使用的命令与原文的命令不同,使用原文的命令,安装完成之后发现使用不了vue ui命令,下面的图片的命令是原文的图片,所以会不一致)

4、验证vue是否安装成功, 命令: vue  -V

这里的v是大写;

4、查看是否能够执行vue ui命令, 命令: vue  -h

五、初始化vue 项目

1、使用vue ui启动

2、启动之后进入如下页面就能创建项目了。

原文地址:https://www.cnblogs.com/masha2017/p/12220783.html

时间: 2024-10-15 12:16:10

vue开发搭建(npm安装 + vue脚手架安装)的相关文章

【vue开发】干货:Vue粒子特效(vue-particles插件)

图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动. 使用教程: npm install vue-particles --save-dev main.js里加入以下代码: import VueParticles from 'vue-particles' Vue.use(VueParticles) App.vue 文件——一个完整的例子: <template> <div id="app"> <vue-

Mac OS X下安装Vue脚手架(vue-cli)

前言 Vue作为前端三大框架(Angular,React,Vue)之一,号称是最简单,最容易上手的框架,同时也是行内的大趋势,还可以用来开发最火的小程序.具有开发快,双向数据流等特点,有些人认为Vue是Angular和React的结合,既有Angular的模板语法也有React的组件化体系,以至于促使其发展飞快.下面来就来讲讲Vue脚手架(vue-cli)的安装吧. 安装vue(使用npm 推荐) # 全局安装 vue-cli $ npm install --global vue-cli # 创

Vue.js 学习入门:介绍及安装

Vue.js 是什么? Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合. 详细讲解内容可见:一句话理解Vue核心内容 (这块内容之后再做个阅读笔记) 环境搭建 1.下载 nodejs(http://nodejs.cn): node -v 终端查看安装成功 npm -v 查看npm版本安装成功 2.安装 vue 命令:npm

Vue Cli搭建域名服务器常见问题

Vue Cli搭建域名服务器常见问题 Vue Cli不使用反向代理配置域名 通过npm run serve命令执行Vue项目只能通过IP地址来访问,即使域名服务中设置DNS依然访问不到.有以下三种解决办法: 1.修改项目根目录下[email protected]\cli-service\lib\options.js文件 //第133行 devServer: { /* open: process.platform === 'darwin', host: '0.0.0.0',//改为域名 port:

关于npm和yarn 安装vue脚手架

第一篇博客有点小紧张.轻喷~ 第一步:安装node.js       地址 --------https://nodejs.org/en/ 详细步骤这里就不写了    可以去看     地址 --------https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html 第二步:下载完了之后进入cmd  输入node -v查看版本号 看到上面表示安装成功.node.js是自带npm的,直接npm install -g @vue/cli

VUE-CLI Vue安装及开发,npm run build无法查看项目的问题

Vue-cli 本地安装vue项目 需要安装node.js,用node命令行npm的方式安装Vue 步骤: 1.进入项目地址安装 npm install vue-cli -g 2.初始化一下 ESlink e2e等是测试工具,经常会报一些vue语法等错误,有时会比较麻烦,可以关闭 3.再安装依赖 npm install npm安装建议挂VPN,不然很慢而且容易出错,不能挂VPN的话可以用cnpm的方式安装国内镜像 4.安装成功直接打开了首页 5.运行 npm run dev 6.项目编译 npm

npm——安装教程、安装vue脚手架

npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题.比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 3)允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用. 首先:先从nodejs.org中下载nodejs 如图,下载8.9.3LTS(推荐给绝大部分用户使用的) 双击安装 一直Next 可以使用默认路径,本例子中自行修改为d:\nodejs 点击In

npm 在安装 Vue脚手架命令(npm install -g @vue/cli)时报错安装报错--“Unexpected end of JSON input while parsing near&#183;&#183;&#183;”

在安装Vue的脚手架(npm install -g @vue/cli 项目名称)时,提示: Unexpected end of JSON input while parsing near 其实,但凡使用npm 时,只要提示这个,都可以按照以下几种方式进行尝试. 第一种:删掉package.lock.json 第二种:清除cache npm cache clean --force第三种:进入下面这个文件夹,把文件夹npm-cache下的内容删除掉(清除cache) 路径:C:/Users/DELL

Windows下安装nodejs并进一步搭建vue开发环境步骤(二)

1.  安装cnpm 说明:由于许多npm包都是在国外,我们这里用到淘宝的镜像服务器,来对我们依赖的module进行安装,因此首先安装"中国的npm"--cnpm 参考网址:http://npm.taobao.org/ 安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.  用cnpm安装vue 安装命令:cnpm install vue -g 3.  安装vue命令行工具 安装命令:cnpm i