1.vue 安装 基于windows环境

本文通过vue-cli脚手架方式搭建vue环境

1.需要先安装nodejs

nodejs官网地址：https://nodejs.org/en/  选择LTS版本，本文中使用的是“node-v8.11.1-x64.msi”版本，双击

安装nodejs 截图：

1.png 2.png

本文安装路径： D:\Program Files\nodejs

3.png 4.png 5.png 6.png

nodejs已经安装完毕，运行--输入cmd，打开命令控制台，输入命令：

node -v  

node -v.png

查看nodejs安装目录

image.png

在nodejs 安装目录（本文中nodejs路径：D:\Program Files\nodejs）中创建两个文件夹：node_global、node_cache

 建立这2个文件目的主要是为了后面构建、加载依赖库不影响全局

在控制台输入：

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

设置nodejs 环境变量：

新建：
  NODE_PATH
  D:\Program Files\nodejs\node_global\node_modules

Path追加方式：
  Path
  ;D:\Program Files\nodejs\node_global

NODE_PATH.png PATH.png

测试nodejs是否可以加载第三方包：

npm install express -g

image.png

可以看到配置的环境变量启作用了，把三方包加载到指定目录下：

image.png

测试能否包含三方包：

运行--输入  node
> require('express')
看到输出信息 表示正确加载三方包,node js已经安装完成

image.png image.png

2.安装vue

安装vue之前，建议把cnpm 进行安装，这个是淘宝对npm镜像,npm服务在国外，如果通过npm安装过程较慢

安装cnpm

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

image.png

安装vue 和vue-cli

cnpm install vue -g

cnpm install vue-cli -g

image.png

创建vue项目，进入工程目录(本文地址：D:\vue)

vue init webpack  vue-template

  vue-template 是项目工程名称

回车
Project name 输入 vue-template
回车
Install vue-router 输入Y                        （vue路由，建议安装）
Use ESLint to link your code 输入N  （这是语法检查，建议输入N）
set up unit vue-template 输入N          (单元测试)
回车坐等安装完毕

install.png image.png

创建好的工程目录：

init.png

工程结构说明：

init.png

命令行进入工程目录进行安装

cnpm install

install.png

然后启动工程

cnpm run dev

输入地址：http://localhost:8080 访问工程

start.png project.png

vue安装和构建项目完成

vue启动工程默认使用的端口是8080，这个和tomcat默认端口是冲突的，更改vue工程端口：

进入项目 D:\vue\vue_template\config\index.js
打开
prot：8080  可以更改为8081

config.png port.png

创建项目基本命令：npm可使用cnpm命令代替：

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev