Vue.js安装及环境搭建

Vue.js环境搭建-Windows版

 

步骤一：安装node.js

在搭建vue的开发环境以前，须要先下载node.js，vue的运行是要依赖于node的npm的管理工具来实现，node能够在官网或者中文网里面下载，根据本身的电脑选择是32仍是64 ，

网址1：http://nodejs.cn/download/

网址2：https://nodejs.org/dist/

为了成员之间统一版本，咱们使用的node-v8.9.1版本：（安装到本身的自定义目录）

连接：https://pan.baidu.com/s/18N4k1Dxdl2TGbWs9Ayn2yw
提取码：n431

 

步骤二：安装镜像

因为 npm install安装速度慢，因此本文使用阿里淘宝镜像及其命令 cnpm进行安装，cmd黑窗口输入命令：

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

 

 

步骤三：安装Vue

输入：cnpm install vue ，回车等待终端给出响应。

 

 

 

 

 

步骤四：安装全局vue-cli脚手架

输入： cnpm install --global vue-cli,安装全局vue-cli脚手架，用于快速搭建大型单页应用。

 

 

步骤五：检查Vue是否安装成功

输入： vue -V检查是否安装成功，若是返回版本号则说明安装成功。

 

步骤六：查看官网提供的模板(这个步骤能够省略)

六个模板中咱们主要使用webpack模板，缘由以下： WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

步骤七：建立一个基于 webpack 模板的新项目（可略）

终端切换到你的目标目录下建立一个项目，这里以在vue的安装目录下建立一个叫作my-vue-project的项目为例:输入

vue init webpack my-vue-project

终端会给你返回以下内容：

 

而后一路回车。

步骤八：启动项目，访问项目（可略）

　　8.1进入项目

       　　 cd my-vue-project

　　8.2启动项目

     cnpm run dev

　　8.3测试访问

　　　　成功执行以上命令后访问 http://localhost:8080/

 

 

 

可能遇到的问题：

1. 权限问题

　　　　安装vue后，执行vue –V 命令报错以下：

vue : 没法加载文件 C:\Users\zs\AppData\Roaming\npm\vue.ps1，由于在此系统上禁止运行脚本。

             解决：不经过Windows PowerShell执行命令，经过cmd执行

　 　2. 启动spt-marking-vue项目报错

11 404s will fallback to /index.html

12 fs.js:127

13  throw new ERR_INVALID_CALLBACK();

14  ^

15 TypeError [ERR_INVALID_CALLBACK]: Callback must be a function 16    at maybeCallback (fs.js:127:9)

17    at Object.write (fs.js:531:14)

18    at /MyWorkProject/hcg/build/webpack.dev.config.js:12:8

19    at FSReqWrap.oncomplete (fs.js:139:20)

20 error code ELIFECYCLE

21 error errno 1

22 error iview-project@2.0.0 dev: `webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js`

22 error Exit status 1

23 error Failed at the iview-project@2.0.0 dev script.

23 error This is probably not a problem with npm. There is likely additional logging output above.

24 verbose exit [ 1, true ]

 

问题缘由：node 版本问题，node v10 以上 fs.write 的callback 是必须的，下降Node版本可解决。

不安装node也能够，能够将webpack.dev.config.js 和 webpack.prod.config.js 中的代码修改便可：给fs.write添加必要的callback函数，具体操做是修改以上两个文件中的如下代码：

fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});

修改成：

fs.write(fd, buf, 0, 'utf-8', function(err, written, buffer) {});

 

 

按照上面指定的node版本不会出现该问题。