vuejs环境配置 - 简书
vuejs环境配置
单独的vuejs文件，点击
通过npm命令安装vuejs在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如
或 的 CommonJS 模块打包器配合使用。（以下操作全在命令行中）# 最新稳定版本
$ npm install -g vue
# 最新稳定 CSP 兼容版本
$ npm install vue@csp
快速搭建大型单页应用# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack project-name
# 安装依赖
$ cd project-name
$ npm install
$ npm run dev 启动项目
通过上面的一系列命令，我们便成功启动了项目，这时我们可以在浏览器中输入:http://localhost:8080/
然后就可以看到下面的界面：
hell0-vuejs.png
我们再看看项目结构
项目结构.png
好了，我们的环境搭建到这里就结束了。
每个人有每个人的选择，不要随意评价。个人站点：/
掘金主页：https://gold.xitu.io/user/56cc5478816dfa
python博客：http://blog.csdn.net/pythonyin?viewmode=contentsVue.js开发环境搭建
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
一、简介Vue.js 是什么 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js是一个MVVM模式的框架，如果读者有angular经验，一定能够很快入门Vue的vue.js的特点:易用： 已经会了HTML,CSS,？即刻阅读指南即可开始构建应用！灵活： 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。高效： 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化二、环境搭建vue推荐开发环境:Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言npm: Nodejs下的包管理器webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。vue-cli: 用户生成Vue工程模板开始安装:1.nodejs由于我已经安装好了,跳过
2.webpack npm install webpack -g3.安装vue脚手架 npm install vue-cli -g 测试:在硬盘上找一个文件夹放工程用的，在终端中进入该目录cd 目录路径根据模板创建项目vue init webpack-simple 工程名字&工程名字不能用中文&或者创建 vue1.0 的项目vue init webpack-simple#1.0 工程名字&工程名字不能用中文&工程目录如图所示:安装项目依赖:安装 vue 路由模块vue-router和网络请求模块vue-resource进入该项目执行npm install vue-router vue-resource --save启动项目npm run dev运行就报错'NODE_ENV' 不是内部或外部命令，也不是可运行的程序或批处理文件。npm ERR! _NT 6.1.7601npm ERR! argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"npm ERR! node v4.0.0-rc.5npm ERR! npm v2.14.2npm ERR! code ELIFECYCLEnpm ERR!
start: `npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profile`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the
start script 'npm run clear&& NODE_ENV=development && webpack-dev-server --host0.0.0.0 --devtool eval --progress --color --profile'.npm ERR! This is most likely a problem with the yy-ydh-web package,npm ERR! not with npm itself.npm ERR! Tell the author that this fails on your system:npm ERR! npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profilenpm ERR! You can get their info via:npm ERR! npm owner ls yy-ydh-webnpm ERR! There is likely additional logging output above.npm ERR! Please include the following file with any support request:npm ERR! D:\workspace\node_modules\yy-ydh-web\npm-debug.log这是windows不支持NODE_ENV=development的设置方式解决方法:●安装across-env: npm install cross-env --save-dev●在NODE_ENV=xxxxxxx前面添加cross-env就可以了。运行还是报错: 找不到webpack这个模块 module.js:457 ^Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.&anonymous& (D:\vue_work\fendo\webpack.config.js:2:15) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3)安装该模块:ccnpm install 模块名 --save-dev(关于环境的，表现为npm run dev 启动不了)cnpm install 模块名 --save(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错)比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list安装好后运行又报这个模块的错:Error: Cannot find module 'bl' at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.&anonymous& (C:\Users\fendo\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js:9:10) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3)接着继续安装cnpm install bl --save-dev再运行:npm run dev访问: http://localhost:8080/ 运行成功
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
CodeSecTeam微信公众号
去了解一个事物的本质，才可以征服该事物。
手机客户端您还可以使用以下方式登录
当前位置：&>&&>&&>& > vue.jswindows下开发环境搭建
vue.jswindows下开发环境搭建
vue.jswindows下开发环境搭建。最近，vue.js越来越火。在这样的大浪潮下，我也开始进入vue的学习行列中，在网上也搜了很多教程，按着教程来做，也总会出现这样那样的问题(坑啊，由于网上那些教程都是Vue.js 1.x版本的，现在用Vue.js 的构建工具都已经升级到2.0版本了)，经过了一段时间的摸索和看官方的教程和api，才了解到2.0版本在1.0版本的基础上做了好多调整，废弃了好多api。。。废话不多说了，把我踩过的坑，在这里跟大家说说，希望对初学者有所帮助。既然是入门实例，那肯定从最基础的开始了，希望初学者们耐心看下去。首先，列出来我们需要的东西：node.js环境(npm包管理器)vue-cli 脚手架构建工具cnpm npm的淘宝镜像安装node.js从node.js官网下载并安装node，安装过程很简单，一路&下一步&就可以了(傻瓜式安装)。 安装完成之后，打开命令行工具，输入node -v，如下图，如果出现相应的版本号，则说明安装成功。npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息。OK!node环境已经安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm。安装cnpm在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待，安装完成如下图。完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。安装vue-cli脚手架构建工具在命令行中运行命令npm install -g vue-cli，然后等待安装完成。 通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。用vue-cli构建项目要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。在这里，我选择桌面来存放新建的项目，则我们需要先把目录cd到桌面，如下图。在桌面目录下，在命令行中运行命令vue init webpack firstVue。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中(我的实例中，会在桌面生成该文件夹)，如下图。运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。打开firstVue文件夹，项目文件如下所示。这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，如下图。安装项目所需的依赖要安装依赖包，首先cd到项目文件夹(firstVue文件夹)，然后运行命令cnpm install，等待安装。安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。安装完依赖包之后，就可以运行整个项目了。运行项目在项目目录中，运行命令npm run dev，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。这里简单介绍下npm run dev命令，其中的&run&对应的是package.json文件中，scripts字段中的dev，也就是node build/dev-server.js命令的一个快捷方式。 项目运行成功后，浏览器会自动打开localhost:8080(如果浏览器没有自动打开，可以手动输入)。运行成功后，会看到如下所示的界面。如果看到这个页面，那就可以开屏香槟来庆祝了，恭喜你，项目运行成功了。 今天就到这吧，下次给大家分享进一步的小案例，让大家加深对Vue.js的理解。就爱阅读网友整理上传,为您提供最全的知识大全,期待您的分享，转载请注明出处。
欢迎转载：
推荐： 　　　Vue.js开发环境搭建
了HTML,CSS,JavaScript？即刻阅读指南即可开始构建应用！
灵活： 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
高效： 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化
二、环境搭建
vue推荐开发环境:
Node.js: javascript
09:47&&&[]
vue-router文档： http://router.vuejs.org/zh-cn/
Vuejs数据请求插件vue-resource
vue-resource文档： /vuejs/vue-resource
Vuejs前端构建工具cooking
21:13&&&[]
VueJs这个框架。一开始接触这个框架是从官方文档，当时就被它的机制所迷倒，于是开始了，VueJS的进阶之路。 &Vue.js的环境搭建 　　1、开发工具 　　　（1）下载nodejs，地址：https://nodejs.org/en/ & & & & （2
21:05&&&[]
好像这就是我想要的东西， 于是决定从零开始学习。
看了遍vue.js的开发文档，觉得大部分是在angular或者react中相似的概念，于是就照着以往的经验，想搭建一个本地开发的架子出来，方便以后进一步学习实践。列出来以下的内容：
我想要一个最初始的boilerplate -- vue-cli 我
12:50&&&[]
Vue.js 现在在后端、前端、微信、移动端Web非常流行，今天简单模拟Vue.js快速安装；
安装npm& npm 是node.js 的包管理工具, 安装流程地址：/cli/install& 估计会非常慢，我们可以使用淘宝NPM
17:28&&&[]
前言 随着 Vue.js 越来越火，Vue.js 的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的 vue-router、vuex 等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来会通过一个简单的 vue-toast 插件，来了解掌握插件的开发和使用
08:42&&&[]
Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通过Vue.js来构建一个中大型的前端项目，同时做好相应的部署与优化工作 Vue.js简介 从上图的介绍中我们
10:18&&&[]
什么是Vue.js
Vue.js 是一套构建用户界面的 渐进式框架。它非常容易与其它库或已有项目整合，而无须从头开始重构整个项目；另一方面，Vue 完全有能力驱动采用单文件组件来开发的更为复杂的单页应用。
目前在我参与开发维护的项目中已经使用上了Vue.js的一些基本功能，下面两幅图来自项目
08:30&&&[]
插件可以让开发者提供的扩展看起来像是vue自己就有的。因为插件的功能会使用Vue全局对象或者实例来调用，或者被修改从而在Vue的钩子函数内起作用。比如用于http调用的插件vue-resource被插入到vue后，可以使用: Vue.http.get(url) 的方式使用此插件提供的服务。本文构建
18:56&&&[]
接上篇关于个人timelineweb源码后台源码
在等待code编译过程中, 写一点这段时间的开发实践。先上个截图。。。还是有点丑的
用sketch搞的logo。。。
主要技术: Vue， Node.js。断断续续写了
16:47&&&[]
wecanstudio-site
Pure JavaScript Web App. Using ES2015 and Babel. All of the posts can be edit in browser.
Intro FontEnd
Vue + Vuex
22:04&&&[]
vue填坑笔记：1、 props:{ photos:{ type: Array, default: () =& [] },
2、 &router-link to=&/group/groupList& tag=&div& class=&quot
12:17&&&[]前端（14）
1.安装node.js(/nodejs/nodejs-install-setup.html)
2.基于node.js,利用淘宝npm镜像安装相关依赖
&在cmd里直接输入：npm install -g cnpm –registry=，回车，等待安装...
3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
在cmd里 1)输入：cnpm install -g vue-cli，回车，等待安装...
& & & & & & 2).输入：vue，回车，若出现vue信息说明表示成功
4.创建项目
在cmd里输入：vue init webpack vue_test(项目文件夹名)，回车，等待一小会儿，依次出现‘git’下的项，可按下图操作
5.安装依赖
在cmd里 &1).输入：cd vue_test（项目名），回车，进入到具体项目文件夹
& & & & & & &2).输入：cnpm&install，回车，等待一小会儿
回到项目文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）
基于脚手架创建的默认项目结构如下图所示：
6.测试环境是否搭建成功
方法1：在cmd里输入：cnpm run&dev
方法2：在浏览里输入：localhost:8080(默认端口为8080)
运行起来后的效果如下图所示：
参照原文：http://blog.csdn.net/luckylqh/article/details/
注：安装过程中的坑
执行cnpm run dev时候报以下错误
To use this template, you must update following to modules: & &npm: 2.15.1 should be &= 3.0.0
解：cmd 中执行&
把npm升级一下就可以了，npm install npm@latest -g 这句命令行就是升级到最新版的npm
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：19278次
排名：千里之外
原创：52篇
转载：37篇
(1)(11)(17)(7)(4)(2)(1)(2)(20)(5)(15)