Vue - 搭建Vue项目

1.1、Vue.js 

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

如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

　　中文文档：介绍 — Vue.js 
　　官方网站：https://cn.vuejs.org
　　　　常用库：路由系统 vue-router 

1.2、node.js

• Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
• Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 
• Node.js 的包管理器 npm，是全球最大的开源库生态系统。
  中文文档：API 文档 | Node.js 中文网
  官方网站：Node.js 中文网

1.3、前端主流框架

• bootstrap：掘金社区、中文文档
• react：       中文社区、中文文档
• angularjs：中文文档
• Node.js:    Node.js 中文网

1.4使用Vue

1.直接引用Vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">可以手动指定版本号</script>

2.NPM搭建

安装node.js，(ps：全部默认路径下一步下一步巴拉巴拉..) 　　安装完成！ 
　　如果自定义安装路径则需要配置环境变量，

1、安装好之后打开cmd ，查看一下版本确认完成安装：

3. 按照官方文档：安装Vue

npm install vue

4. Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用

# 全局安装 vue-cli（ps:因为是直接连接国外网站，嫌弃慢的同鞋可以用淘宝镜像具体方法里面有详细介绍）
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev一些其他命令：(不推荐，指定完第一个再指定第二个node占用CPU巨高且没反应，直接卸载重来)# 指定下载全局下载路径$ npm config set prefix "D:\Program Files\node_global\"# 指定cache路径$ npm config set cache "D:\Program Files\node_cache\"# 查找默认下载路径,同理cache路径$ npm config get prefix/cache

5. 初始化项目，想要一个一个选就去掉 ' --yes '

 6、开始构建项目

# 检查Vue
$ vue list

（ps：注意，在哪个文件夹下执行命令就在哪个文件夹下创建项目文件！）
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project$ npm run dev

 7、安装依赖包

npm install

8、运行项目 （ps：要在项目目录内执行 'npm run dev' ，不然会提示找不到Json文件）

npm run dev

9.项目启动成功 如图