Vue项目的环境搭建主要步骤如下:

vue项目创建

安装NodeJS

  1. +到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.exe的可执行文件。
  2. +如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级。`npm install npm -g  # windows`

安装 webpack

  1. -安装好 npm 之后,就可以通过 npm 命令来下载各种工具了,安装打包工具 webpack,-g 表示全局安装。`npm install webpack -g`
  2. +安装 vue-cli

安装 vue-cli

  1. +安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装。`npm install vue-cli -g`

安装 nrm

  1. +安装 nrm npm下资源控制器工具`npm install nrm -g`查看镜像命令`nrm ls`使用某个为默认镜像的命令`nrm user cnpm`

安装 Yarn

  1. +Yarn是Facebook发布的 node.js 包管理器,它比 npm 更快、更高效,可以使用Yarn替代 npm 。`npm i yarn -g --verbose`

创建项目

  1. +环境已经搭建完成,现在我们通过 vue-cli 来生成一个项目,名称为 kitty-ui。
  2. +项目创建命令如下`vue init webpack kitty-ui`

以下是copy被人的博客,作为记录地址:https://www.cnblogs.com/xifengxiaoma/p/9533018.html#undefined

技术基础

开发之前,请先熟悉下面的4个文档

开发环境

  • Node JS(npm)
  • Visual Studio Code(前端IDE)

安装Visual Studio Code

下载地址: 官网下载地址

Visual Studio Code 是一款非常优秀的开源编辑器,非常适合作为前端IDE, 根据自己的系统下载相应的版本进行安装。

更多 VS Code 教程可以参考以下资料

官网文档:https://code.visualstudio.com/docs

简书教程:https://www.jianshu.com/p/990b19834896

安装NodeJS

下载地址: nodejs中文网

到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.exe的可执行文件。

把Node添加到系统环境变量里面,打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确。

如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级。

sudo npm install npm -g #linux
npm install npm -g  # windows

可以看到升级之后,再次执行 npm -v 查看版本已经升级到 6.4.0 了。

更多NodeJS教程可以参考以下资料

中文官网:http://nodejs.cn/api/

菜鸟学堂:https://www.runoob.com/nodejs/nodejs-tutorial.html

安装 webpack

安装好 npm 之后,就可以通过 npm 命令来下载各种工具了。

安装打包工具 webpack,-g 表示全局安装。

npm install webpack -g

更多webpack教程可以参考以下资料

菜鸟学堂:http://www.runoob.com/w3cnote/webpack-tutorial.html

安装 vue-cli

安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装。

npm install vue-cli -g

淘宝镜像

因为 npm 使用的是国外中央仓库,有时候下载速度比较“喜人”,就像 Maven 有国内镜像一样,npm 在国内也有镜像可用。这里建议使用淘宝镜像。

安装淘宝镜像,安装成功后 用 cnpm 替代 npm 命令即可,如: cnpm install webpack -g 。

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

安装 Yarn

Yarn 是 Facebook 发布的 node.js 包管理器,它比 npm 更快、更高效,可以使用 Yarn 替代 npm 。

如果你安装了node,就安装了npm,可以使用下面的命令来安装:

npm i yarn -g --verbose

npm官方源访问速度实在不敢恭维,建议使用之前切换为淘宝镜像,在yarn安装完毕之后执行如下指令:

yarn config set registry https://registry.npm.taobao.org

到此为止我们就可以在项目中像使用npm一样使用yarn了。

使用 Yarn 跟 npm 差别不大,具体命令关系如下:

npm install  => yarn install
npm install --save [package] => yarn add [package]
npm install --save-dev [package] => yarn add [package] --dev
npm install --global [package] => yarn global add [package]
npm uninstall --save [package] => yarn remove [package]
npm uninstall --save-dev [package] => yarn remove [package]

创建项目

环境已经搭建完成,现在我们通过 vue-cli 来生成一个项目,名称为 kitty-ui。

vue init webpack kitty-ui

一路根据提示输入项目信息,等待项目生成。

命令执行完毕,生成项目结构如下

进入到项目根目录,执行  yarn install (也可以用 npm install,或淘宝 cnpm install,我们这里用 yarn 会快一点) 安装依赖包。

cd kitty -ui
yarn install

依赖包安装完成之后,会在项目根目录下生成 node_modules 文件夹,是下载的依赖包的统一存放目录。

安装完成之后,执行应用启动命令,运行项目。

npm run dev

命令执行之后,如果显示 “I Your application is runing here ....”,就表示启动成功了。

浏览器访问对应地址,如这里的: http://localhost:8080,会出现 vue 的介绍页面。

到此,我们的项目脚手架就建立起来了。

vue项目创建

安装NodeJS

  1. +到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.exe的可执行文件。
  2. +如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级。`npm install npm -g  # windows`

安装 webpack

  1. -安装好 npm 之后,就可以通过 npm 命令来下载各种工具了,安装打包工具 webpack,-g 表示全局安装。`npm install webpack -g`
  2. +安装 vue-cli

安装 vue-cli

  1. +安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装。`npm install vue-cli -g`

安装 nrm

  1. +安装 nrm npm下资源控制器工具`npm install nrm -g`查看镜像命令`nrm ls`使用某个为默认镜像的命令`nrm user cnpm`

安装 Yarn

  1. +Yarn是Facebook发布的 node.js 包管理器,它比 npm 更快、更高效,可以使用Yarn替代 npm 。`npm i yarn -g --verbose`

创建项目

  1. +环境已经搭建完成,现在我们通过 vue-cli 来生成一个项目,名称为 kitty-ui。
  2. +项目创建命令如下`vue init webpack kitty-ui`

Vue项目的npm环境搭建的更多相关文章

  1. 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建)

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  2. vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发

    vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...

  3. webstorm如何调试vue项目的js

    webstorm如何调试vue项目的js webstormvuewebstorm调试jsjs 1.编辑调试配置,新建JavaScript调试配置,并设置要访问的url地址,如下图所示: 在URL处填写 ...

  4. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

    缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...

  6. 萌新--关于vue.js入门及环境搭建

    十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了 ...

  7. Vue.js安装及环境搭建

    Vue.js环境搭建-Windows版 步骤一:安装node.js 在搭建vue的开发环境之前,需要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者 ...

  8. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  9. 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

随机推荐

  1. UnityEngine.Time类属性解析

    UnityEngine.Time类包含的属性: public static int captureFramerate { get; set; } public static float deltaTi ...

  2. Android布局分析工具HierarchyView的使用方法

    本文是从这里看到的:http://www.2cto.com/kf/201404/296960.html 如果我们想宏观的看看自己的布局,Android SDK中有一个工具HierarchyView.b ...

  3. [转] OpenStack IPSec VPNaaS

    OpenStack IPSec VPNaaS ( by quqi99 ) 作者:张华  发表于:2013-08-03版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声 ...

  4. Caffe常用层参数介绍

    版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/Cheese_pop/article/details/52024980 DATA crop:截取原图像中一个 ...

  5. 如何在windows2003(IIS6)下配置IIS,使其支持cshtml

    在开发环境机器上,安装WEB PAGES 后,会在 C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages 的下产生DLL 其中 Micr ...

  6. 使用ASP.NET AJAX与Bootstrap 弹窗解决方案

    我在做采购系统时,因为使用了ASP.NET AJAX的UpdatePanel的控件,可以使得页面局部刷新显示.但是使用起来问题还是很多. 下面列出了一种情况,花了将近5个小时才算解决,虽然不是很完美, ...

  7. python文档生成工具:pydoc、sphinx;django如何使用sphinx?

    文档生成工具: 自带的pydoc,比较差 建议使用sphinx 安装: pip install sphinx 安装主题: 由各种主题,我选择常用的sphinx_rtd_theme pip instal ...

  8. 使用C++ Builder XE5获取Sensor值之Light Sensor

    献上代码C++代码,仅供參考. 若使用Delphi.请參考文献,http://blogs.embarcadero.com/davidi/2013/12/02/43032/ 一定记得要安装FireMon ...

  9. WEB中会话跟踪

    一.     什么叫会话跟踪 记录用户一段时间内的逻辑上相关联的不同访问请求个过程叫“会话跟踪”.通过用户在每次对服务请求时的唯一标识,可以跟踪会话. 二.     会话跟踪产生的原因 我们都知道In ...

  10. RV32M指令集

    Risc-V定义了可选的RV32M,它定义了整数乘法除法指令. 总共8条指令. Category Fmt RV32I base machine code(bin) comment mul 整数乘法 R ...