node.js和vue安装

1. 官网(https://nodejs.org)下载安装 node ,傻瓜式安装, 可自行选择要不要更改安装路径, 默认安装在C盘,建议装到其它盘。

2. 安装成功之后,打开cmd窗口, 输入 node -v 查看安装版本, 有版本号说明安装成功,输入 npm -v 也会显示版本号,说明安装成功。

3. 配置全局 globle 和缓存 catch:

找到自己的 node.js 安装目录,在里面新建两个文件夹 node_global 和 node_cache,然后cmd命令行输入

npm config set prefix "D: odejs ode_global"

npm config set cache "D: odejs ode_cache"

设置成功后,以后用命令 npm install XXX -g 安装的模块都会在 D: odejs ode_global里了。

4. 基于 Node.js 安装cnpm(淘宝镜像)

因为原始的npm安装模块速度太慢,这里我们安装 cnpm,以后安装时使用 cnpm install XXX -g代替,速度会快很多。

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

5. 设置环境变量(重要

设置环境变量可以使得住任意目录下都可以使用 npm 、cnpm、vue等命令,而不需要输入绝对路径
1、鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。
2、修改系统变量PATH

系统变量下新增

NODE_PATH D: odejs ode_modules

Path变量下新增

D: odejs ode_global

6. 安装 vue

npm install -g vue

推荐

cnpm install -g vue

7. 安装 vue-cli 脚手架

npm install -g vue-cli

推荐

cnpm install -g vue-cli

8. 使用 vue-cli 脚手架生成 vue 项目模板

在你指定目录下cmd打开命令行,输入

vue list

可显示出当前你可以使用的模板列表

 一般我们使用最后两个。

vue init webpack-simple mytest

vue init webpack mytest

*注意:最后的文件名必须使用小写英文,不然会提示错误。

初始化完成后的项目目录结构如下:

使用 webpack-simple 模板的生成结果

使用 webpack 模板的生成结果

9. 安装项目依赖

例如,进到上一步生成的 mytest 工程目录下,cmd命令行

npm install

cnpm install

 

10. 运行完整项目,查看是否能够正常运行

npm run dev

cnpm run dev

11. 安装 axios(ajax) 模块

默认生成的工程是不带 axios 模块的,需要手动安装

在工程目录下,cmd命令行输入

npm install --save axios vue-axios qs

cnpm install --save axios vue-axios qs

*注:qs序列化插件工具

然后在工程文件 main.js 中全局引入即可使用。

import axios from 'axios'
Vue.prototype.$axios = axios
 
【转载】文末提供一个不错的相关博文
不做加班狗,不做社畜,不做奋斗逼。喜欢秋天温暖的阳光和享受闲逸的下午茶。我们是科技时代的领跑人,不是软弱卑微又无助的小码农~
原文地址:https://www.cnblogs.com/chenyixun/p/14537872.html