Vue.js开发环境搭建(安装过程遇到的问题)

网络上关于Vue.js的安装过程有很多介绍,这里不多赘述,这里只是记录自己安装过程和遇到的问题

1 首先安装node.js 到官网下载node.js安装包,安装过程和一般软件没有区别。安装完成后到终端查看版本号,若如下图所示,表示安装成功。

2.node.js环境变量新建

  其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_global”和"node_cache"两个文件夹。

注:npm是nodejs的一个模块化管理工具,现在已经集成到nodejs中了,不需要再另外安装,需要首先配置一下npm的全局存放路径以及缓存路径,这里是将两个文件夹建立在了nodejs的根目录下

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

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

将这两个目录添加到window环境变量path下,其中 node_global 目录下包含vue命令所需的文件

3 安装webpack

1 npm install webpack -g

4安装vue脚手架

1 npm install vue-cli -g

注意上面两部安装过程会出现:

1 npm WARN deprecated [email protected]2.2.2: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
2 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\browser-sync\node_modules\chokidar\node_modules\fsevents)
3 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]1.0.14: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

开始以为这是安装不正确,后来在overstockflow看到大神回复:

 1 The warning message is just a warning message and not an error. It does not affect the application.
 2
 3 It is a log message that an optional dependency could not be installed because it is not supported/needed on your current platform/cpu-arch. For example the package fsevents is often used as optional dependency but fails on any system that is not a Mac.
 4
 5 To show what package is throwing this message, run
 6
 7 $ npm install --verbose
 8 This warning could also be triggered by packages having an engine set to something lower than what you are running. You can try
 9
10 $ pm_config_engine_strict=false npm install
11 to get around this

重新打开cmd,这个时候打vue命令显示正常。

5.这个时候开始新建vue项目,首先cmd转到某个目录下(保存新建的vue项目的文件目录)

1 vue init webpack-simple 工程名字<工程名字不能用中文>

6.安装项目依赖:

npm install vue-router vue-resource --save 

7.启动vue项目

 npm run dev 

出现 : ‘cross-env‘ 不是内部或外部命令,也不是可运行的程序

vue框架需要在在package.jsonscripts标签下配置一系列命令

 1 {
 2   "name": "vue0002",
 3   "description": "A Vue.js project",
 4   "version": "1.0.0",
 5   "author": "",
 6   "private": true,
 7   "scripts": {
 8     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10   },
11   "dependencies": {
12     "vue": "^2.3.3",
13     "vue-resource": "^1.3.4",
14     "vue-router": "^2.7.0"
15   },
16   "devDependencies": {
17     "babel-core": "^6.0.0",
18     "babel-loader": "^6.0.0",
19     "babel-preset-env": "^1.5.1",
20     "cross-env": "^3.2.4",
21     "css-loader": "^0.25.0",
22     "file-loader": "^0.9.0",
23     "node-sass": "^4.5.0",
24     "sass-loader": "^5.0.1",
25     "vue-loader": "^12.1.0",
26     "vue-template-compiler": "^2.3.3",
27     "webpack": "^2.6.1",
28     "webpack-dev-server": "^2.4.5"
29   }
30 }

解决方式 :

1 安装cross-env:npm install cross-env --save-dev
2
3 在NODE_ENV=xxxxxxx前面添加cross-env就可以了。

重新运行    npm run dev

首先检查 webpack是否安装成功:

我们打开CMD,输入node,
再键入require(‘webpack‘)

这里就不理解了,前面第3步全局安装了webpack

尝试 1:去掉-g 参数的全局安装

npm install webpack-dev-server;

尝试2:作为本地依赖安装

npm i -D webpack;

再次运行 :

npm run dev  (哎呦我去!!);

解决方案 :尝试运行:

npm install babel-loader --save;

再次运行:

npm run dev;

到这里,尝试运行:

npm install babel-core --save;

安装完成后继续:

npm run dev;

这是因为.babelrc文件里的配置:

{
  "presets": [
    ["env", { "modules": false }]
  ]
}

运行 :

npm i babel-preset-env --save-dev  ;

重新运行:

npm run dev;

安装  vue,vue-loader:

npm install vue --save-dev;

npm install vue-loader --save-dev;

安装  vue-template-compiler:

npm install vue-template-compiler --save-dev;

安装 (其中node-sass module无法安装的话可以使用后面淘宝镜像安装):

npm install css-loader --save-dev;

npm install sass-loader --save-dev;

npm install file-loader  --save-dev;

npm install node-sass -g --save-dev( npm install node-sass --registry=http://registry.npm.taobao.org);

注意code-sass这个module需要Python环境,这里Python环境搭建就不说了,这个比较坑,要在vue安装目录下node_modules\npm安装

时间: 2024-12-24 16:11:14

Vue.js开发环境搭建(安装过程遇到的问题)的相关文章

windows下vue.js开发环境搭建教程

这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说

vue.js开发环境搭建

1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装...2).输入:vue -V,回车,若出现vue信息说明表示成功 4.创建vue项目 在cmd里输入:vue

vue.js开发环境搭建以及创建一个vue实例

Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js 之前首先需要搭建 vue.js 的开发环境,下面,我们就来一步一步的搭建 vue.js 的环境: 1.首先,我们需要安装 node.js: 安装 node.js 请参考  node.js安装配置 ,可以打开命令行,输入 node -v,如果输出版本号,说明我们安装 node 环境成功,输入 npm

vue.js 开发环境搭建

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架 在cmd里 1)输入:cnpm install -g vue-cli,回车,等待

1、vue.js开发环境搭建

来源是:http://www.cnblogs.com/ganmy/p/6029774.html 1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue-cli脚手架,用于帮助搭

vue.js开发环境安装教程

一.nodejs安装-npm安装1.nodejs安装①下载对应系统版本的Node.js:https://nodejs.org/en/download/② 运行程序开始安装,一路next最终install即可2.npm安装(新版Node.js已自带npm)③检测是否安装成功.快捷键win+R,输入cmd回车打开cmd窗口node -v 查看node.js的版本号npm -v 查看node.js自带的npm的版本号3.配置环境变量[说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及

【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)

原文网址:http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创) 一直想搞NDK开发却一直给其他事情耽搁了,参考了些网上的资料今天终于把环境搭建起来了,把过程记录下来分享给大家. 内容目录: 1.默认基础环境 2.NDK下载与配置 3.安装Cygwin 4.用NDK编译 5.安装

在windows环境下基于sublime text3的node.js开发环境搭建

首先安装sublime text3,百度一堆,自己找吧.理论上sublime text2应该也可以.我只能说一句:这个软件实在是太强悍了. 跨平台,丰富的插件体系,加上插件基本上就是一个强悍的ide了.目前我在使用的主要是Emmet.Python.还有一些格式化的插件(xml,json),加上这次安装的node.js. node.js的安装就不用多说了,直接http://nodejs.org/ 点击install下载window版本的安装程序后安装即可.默认的安装会将安装目录加到path环境变量

Android NDK r8 Cygwin CDT 在window下开发环境搭建 安装配置与使用 详细图文讲解

android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创) 一直想搞NDK开发却一直给其他事情耽搁了,参考了些网上的资料今天终于把环境搭建起来了,把过程记录下来分享给大家. 内容目录: 1.默认基础环境 2.NDK下载与配置 3.安装Cygwin 4.用NDK编译 5.安装CDT插件 6.安装Sequoyah插件 7.JNI编译环境配置 画了一个思维导图让大家一目了然配置过程 ---------------------------