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

一、node环境搭建

1.安装node node官网https://nodejs.org/zh-cn/ .下载安装 之后 win+R 键 打开 cmd命令窗口
Vue Demo Vue入门 从node 安装 到创建一个 空白项目
运用 node -v 可以查看到 node版本 标识 node 安装成功.
2.查看 npm 是否安装成功.
Vue Demo Vue入门 从node 安装 到创建一个 空白项目

可以先 新键一个空白文件夹 用 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.是否在当前文件夹创建 项目
2.项目名称
3.项目备注
4.项目创建者是谁
5.是否安装vue-router vue路由
6.使用ESLint对代码进行lint?
7.设置单元测试
8.使用Nightwatch设置e2e测试

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

npm install

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

1.有时候 电脑默认的8080端口会被占用.项目根目录下有一个config文件夹,看名字就知道与配置有关,打开config目录下的index.js
找到 port: 8080, 可以修改项目启动端口
2.autoOpenBrowser为true即可实现自动打开页面

五、启动

npm run dev
Vue Demo Vue入门 从node 安装 到创建一个 空白项目
看到上图说明 项目启动成功!

六、打包

npm run build
打包之后 根目录下就会出现一个 dist 文件夹
这里面就是 打包之后的东西了
Vue Demo Vue入门 从node 安装 到创建一个 空白项目

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

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

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

附带一个vue 空白项目连接