一、概述

二、vue推荐开发环境

三、node介绍及安装

1、npm是什么：

2、node是什么

3、npm和Node.js的发展

4、node安装

5、安装vue-cli

四、新建vue项目

五、打包运行

一、概述

我们使用Vue.js一定要安装node.js吗？准确的说是使用vue-cli 搭建项目的时候需要nodejs。你也可以创建一个 .html 文件，然后通过如下方式引入 Vue，一样可以使用Vue。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

但是使用node是比较方便的，打包部署，解析vue单文件组件，解析每个vue模块，拼在一起等，启动测试服务器localhost, 帮你管理 vue-router，vue-resource这些插件。所以通常情况下我们会使用Vue+node方式，方便省事。

二、vue推荐开发环境

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（http://npm.taobao.org/）

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

vue-cli: 用户生成Vue工程模板

三、node介绍及安装

1、npm是什么：

当一个网站依赖的js代码越来越多，程序员发现这是一件很麻烦的事情：
去 jQuery 官网下载 jQuery
去 BootStrap 官网下载 BootStrap
去 Underscore 官网下载 Underscore
……

有些程序员就受不鸟了，于是npm就出来了，全称是 Node Package Manager 包管理工具。
这一点和maven、gradle十分相似，只不过maven、gradle是用来管理java jar包的，而npm是用来管理js的。

NPM 的实现思路和maven、gradle是一样的：
1、有一个远程代码仓库（registry），在里面存放所有需要被共享的js代码，每个js文件都有自己唯一标识。
2、用户想使用某个js的时候，只需引用对应的标识，js文件会自动下载下来。

2、node是什么

Node.js是一个Javascript运行环境(runtime environment)，不是一个js文件，实质是对Chrome V8引擎进行了封装。Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python 等服务端语言平起平坐的脚本语言。
[1]Node.js提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。
[2]Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。

3、npm和Node.js的发展

npm作者已经将npm开发完成，于是发邮件通知 jQuery、Bootstrap、Underscore 作者，希望他们把 jquery、bootstrap 、 underscore 放到npm远程仓库，但是没有收到回应，于是npm的发展遇到了瓶颈。
Node.js作者也将Node.js开发完成，但是 Node.js 缺少一个包管理器，于是他和 npm 的作者一拍即合、抱团取暖，最终 Node.js 内置了 npm。
后来的事情大家都知道，Node.js 火了。随着 Node.js 的火爆，大家开始用 npm 来共享 JS 代码了，于是 jQuery 作者也将 jQuery 发布到 npm 了。所以现在，你可以使用 npm install jquery 来下载 jQuery 代码。现在用 npm 来分享代码已经成了前端的标配。

4、node安装

去官网下载：node官网：Node.js

如果要下载其他版本请点击其他下载即可找到对应的版本

建议新手直接无脑下一步，也可以选择自定义安装

用管理员打开dos命令框

查看node版本node -v查看npm版本npm -v

虽然npm是node自带的，但他未必是最新的版本，如果想要最新版本，可以执行npm install -g npm

使用淘宝NPM 镜像

大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

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

这样就可以使用cnpm 命令来安装模块了

5、安装vue-cli

cnpm install vue-cli -g      //全局安装 vue-cli

查看vue-cli是否成功

vue list

四、新建vue项目

用管理员权限打开dos窗口，切换到需要创建项目的路劲下

vue init webpack frontend

npm install

运行项目
npm run dev

五、打包运行

npm run build

vue项目打包后只有三个文件，如下：

这样就直接可以通过自己定义的路由访问啦！！！

到此结束了，不会的去学习去

vue项目搭建及打包运行相关推荐

Re：从零开始的Vue项目搭建
Re:从零开始的Vue项目搭建初始的终结与结束的开始 Nodejs项目的简单测试从零开始 webpack开发模式 webpack编译打包后记初始的终结与结束的开始最开始接触vue项目搭建是从 ...
Vue 项目搭建流程和使用大全
Vue 项目搭建流程及项目中遇到的问题项目搭建流程 1.使用vue cli 搭建项目框架 cnpm install -g vue-cli 安装vue cli 脚手架 vue init webpack ...
node安装与环境搭建 + VUE项目搭建
一.node环境安装 1.node下载 node.js官网地址:Node.js LTS:表示稳定版一般用于生产环境,重点在于稳定,如果你需要稳定性并拥有复杂的生产环境(例如中型或大型企业),建议使 ...
SWT项目搭建、打包(可执行jar)、部署(包装exe)
简述 SWT与Eclipse插件(RCP)不同.SWT比较原生,后者是基于前者而起的一个框架,它能结合Eclipse提供的功能自动的打成一个exe的可执行文件.而SWT需要做额外的操作. 本文记述了S ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
对vue项目js文件打包时进行混淆加密
对vue项目js文件打包时进行混淆加密环境 vue 3 vue cli 4 webpack 4.0.0 https://www.cnblogs.com/dragonir/p/14445767.htm ...
vue项目搭建详细教程
1.下载node.js 下载地址:Download | Node.js 直接下一步下一步即可下载完成下载完成后,按住win+R,输入cmd回车查看node版本:node -v 查看npm 版本:n ...
vue项目使用nwjs打包、替换exe桌面图标以及exe内容的图标全教程
关于vue项目使用nwjs打包.替换exe桌面图标以及exe内容的图标全教程单纯的打包exe(不含更改exe桌面图标以及内容图标) 前言:首先我们需要有一个自己的vue项目. 1)单纯前端自己玩的v ...
Vue项目搭建手把手教学
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...

vue项目搭建及打包运行

一、概述

二、vue推荐开发环境

三、node介绍及安装

1、npm是什么：

2、node是什么

3、npm和Node.js的发展

4、node安装

5、安装vue-cli

四、新建vue项目

五、打包运行

vue项目搭建及打包运行相关推荐

最新文章

热门文章