vue项目安装到启动

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

转载自 前端程序猿之路 公众号

原文链接：https://mp.weixin.qq.com/s?__biz=MzI0NzUyNTY4Mg==&mid=2247483748&idx=1&sn=1fa5f8ada9e4bca41ba61ee8995c2b6d&chksm=e9aff939ded8702fafeff58f4d9cf78e0551f46aa37931caa23357dedd72fa7c7a055c033d4c&token=1928447548&lang=zh_CN#rd

vue简介

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网链接

Vue详细教程，请参考：https://cn.vuejs.org/

项目安装到启动

第一步npm安装

vue的运行是要依赖于node的npm的管理工具来实现,先从nodejs.org中下载nodejs，下载链接：https://nodejs.org/en/

双击后开始安装，在安装界面一直点击Next


一直到点击Finish完成安装。
打开控制命令行程序（CMD）,检查node是否正常

NPM（node package manager),通常称为node包管理器，主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等切换。
使用淘宝NPM 镜像，因为国内直接使用npm 的官方镜像比较慢，想要下载快点推荐使用淘宝 NPM 镜像。

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

这样就可以使用cnpm 命令来安装模块了

第二步项目初始化

安装vue-cli

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

cnpm install vue-cli -g      //全局安装 vue-cli

检查vue-cli是否成功，不能检查vue-cli,需要检查vue

新建vue项目

选定路径后，新建vue项目，新建vue-template文件夹，cd目录路径
下面我新建了一个项目名称为template-vue的vue项目
vue init webpack ”项目名称“
后面内容根据项目需求进行选择

第三步 启动项目

现在已经创建好了，那就让项目先安装下依赖再运行一下，会出现下面的页面，操作指令是：

cnpm install
cnpm run dev

启动成功。

利用vue-cil初始化构建vue项目后，我们会获得一个初始化的文件夹结构，如下：

vue目录结构简介

|── README.md 项目介绍
|── index.html 入口页面
|── build 构建脚本目录
│ |── build.js 生产环境构建脚本
│ |── utils.js 构建相关工具方法
│ |── webpack.base.conf.js wabpack基础配置
│ |── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
|── config 项目配置
│ |── dev.env.js 开发环境变量
│ |── index.js 项目配置文件
│ |── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
|── mock mock数据目录 模拟测试数据
│ └── hello.js
|── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
|── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ |── components 公共组件目录
│ │ └── title.vue
│ |── assets 资源目录，这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ |── routes 前端路由
│ │ └── index.js
│ |── store 应用级数据（state）状态管理
│ │ └── index.js
│ └── views 页面目录
│ |── hello.vue
│ └── notfound.vue
|── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录（unit&e2e）
└── unit 单元测试

参考链接

基于Vue的前后端分离开发注意事项:
http://www.zving.com/c/2018-01-11/271913.shtml

下一篇文章开始讲—Mock.js使用简介及应用示例