Vue Demo Vue入门 从node 安装 到创建一个 空白项目

 一、node环境搭建

1.安装node  node官网https://nodejs.org/zh-cn/  .下载安装 之后 win+R 键 打开 cmd命令窗口

运用 node -v 可以查看到 node版本 标识 node 安装成功.

2.查看 npm 是否安装成功.

> 可以先 新键一个空白文件夹 用 cmd命令 进入 当前文件夹

 二、安装Vue脚手架 vue-cli

可以使用 npm 直接安装 或者 cnpm 安装

> npm安装 命令 ----- npm install -g vue-cli

> 使用npm 安装 cnpm ------  npm install cnpm -g --registry=https://registry.npm.taobao.org

>  安装之后 可以使用 cnpm -v 查看版本

> 用cnpm 安装  vue-cli  -----cnpm install -g vue-cli

#三、使用 vue-cli 创建一个空白项目

在新建的文件夹中 输入

> vue init webpack

Vue Demo Vue入门 从node 安装 到创建一个 空白项目_第1张图片

**从上往下的意思是:**

> 1.是否在当前文件夹创建 项目

> 2.项目名称

> 3.项目备注

> 4.项目创建者是谁

> 5.是否安装vue-router vue路由

> 6.使用ESLint对代码进行lint?

> 7.设置单元测试

> 8.使用Nightwatch设置e2e测试

Vue Demo Vue入门 从node 安装 到创建一个 空白项目_第2张图片

***安装项目依赖***

> npm install

## 四、启动项目之前 可以做的简单修改

> 1.有时候 电脑默认的8080端口会被占用.项目根目录下有一个config文件夹,看名字就知道与配置有关,打开config目录下的index.js

> 找到 port: 8080, 可以修改项目启动端口

> 2.autoOpenBrowser为true即可实现自动打开页面

## 五、启动 

> npm run dev

Vue Demo Vue入门 从node 安装 到创建一个 空白项目_第3张图片

看到上图说明 项目启动成功!

## 六、打包

> npm  run build

打包之后 根目录下就会出现一个 dist 文件夹

这里面就是 打包之后的东西了 

Vue Demo Vue入门 从node 安装 到创建一个 空白项目_第4张图片
Vue Demo Vue入门 从node 安装 到创建一个 空白项目_第5张图片

## 七、项目根目录文件介绍(网图)

Vue Demo Vue入门 从node 安装 到创建一个 空白项目_第6张图片


附带一个vue 空白项目连接

你可能感兴趣的:(Vue Demo Vue入门 从node 安装 到创建一个 空白项目)