📖Vue cli 安装教程

最近感觉自己都变懒了，好久没更新了差点忘记我自己还有一个博客！来记录下一个简单的Vue安装步骤吧！

1：安装Vue

1.1：检查安装node.js，打开cmd运行窗口输入

node -v
npm -v

会显示版本号，如下图

1.2：安装脚手架工具Vue-cli

npm install --global vue-cli

1.3：安装Vue-cli(没有安装webpack的先安装webpack)

npm install -g webpack (没有安装webpack执行此代码)
vue init webpack newVue

vue init webpack newVue (可自己命名)
注意：安装过程中需要输入选项(Y/N)
在提示 Use ESLint to line your code 时选择 No （询问您是否安装ESLint，检查代码的工具）

1.4：安装依赖

cd newVue (刚刚自己命名的)
npm install

1.5：运行项目

npm run dev

在浏览器上输入：localhost:8080 即可访问Vue基础页面
1.6：结束运行中的项目
只需对着cmd页面 ctrl + c ,选择 Y 即可
到这里为止 Vue-cli 就已经安装完成了，下面开始文件目录的讲解

2：文件目录

build：项目构建(webpack)相关代码

config：配置目录，包括端口号等

node_modules：npm加载的项目依赖块

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

– assets: 放置一些图片，如logo等

– components：该目录里存放的我们的开发文件组件，主要的开发文件都存放在这里了

– App.vue：项目入口文件

– main.js：项目的核心文件

– router：路由配置目录

static：放置一些静态资源文件

test：初始测试目录，可删除

index.html：首页入口文件

package.json：项目配置文件

README.md：项目的说明文档，markdown 格式

3：启动流程步骤

1：当执行 npm run dev 时会先执行当前文件夹中的 package.json 启动服务器，默认端口为 8080
2：执行 src 文件夹中的 main.js
3：加载 src 文件夹中的 App.vue
4：加载 src 文件夹中的 router 文件夹中的index.js(配置路由文件)

结尾

Vue 是基于 node 环境的，在安装Vue之前得确保你有安装 node