Vue CLI Webpack 创建Vue项目

简介

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

是一个构建用户界面的框架
是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据的双向绑定
数据驱动和组件化的前端开发
通过简单的API就能实现响应式的数据绑定和组合的视图组件

安装环境

安装NodeJS

在官网https://nodejs.org/en/下载安装包，然后点击安装包进行安装，把nodejs安装在非空格目录下，会减少错误

安装完成后，在cmd中输入node -v，若显示版本说明安装成功，我这里安装的是v10.5.0

node -v

输入npm -v 可以看到npm也已安装成功，这是因为nodejs自带npm

npm -v

配置环境变量NODE_PATH指向安装路径下的node_modules

安装淘宝NPM镜像

因为npm下载资源来源国外，网络不稳定，下载也慢，安装了淘宝的镜像后使用国内cnpm资源会变得非常快

在CMD命令提示符中输入下面的命令

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

安装完成后输入cnpm -v查看是否安装成功，成功显示版本号

cnpm -v

如果输入cnpm -v 提示不是内部或外部命令，说明cnpm没有安装成功，找到user/admin/.npmrc文件删除后，重新执行以上命令，再输入cnpm -v就可以显示版本号了。

把nodejs安装在非空格目录下，第一次安装就可以成功!

安装vue-cli

由于刚刚安装了cnpm，此时就可以使用cnpm命令安装vue-cli(脚手架)

cnpm install -g vue-cli

安装完成输入vue -V查看是否安装成功，安装成功后显示版本号

vue -V

创建项目

创建项目，首先我们要选定项目目录，然后再命令行中把目录转到选定的目录。在这里，我选择桌面来存放新建的项目，则我们需要先把目录切换到桌面

cd Desktop

运行命令 vue init webpack myproject ，初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的，其中myproject是整个项目文件夹的名称

vue init webpack myproject

中间会输入项目名，回车默认名称，描述回车默认，Author作者自填，Vue build回车，vue-router Yes，ESLint（代码检查，很烦人，建议不要） No，tests No，e2e No，后面一路回车进行下载安装

最后显示Project initiazation finished！项目初始化完成

切换到项目路径

cd myproject

安装项目依赖

cnpm install

安装完依赖包之后，就可以运行整个项目了

运行项目

在项目目录中，运行命令 npm run dev

npm run dev

可以看到项目已经运行在 http://localhost:8080

访问 http://localhost:8080，可以看到项目成功运行

文件说明

①main.js是我们的入口文件，主要作用是初始化vue实例，并使用我们需要的插件

②App.vue是我们的根组件，所有页面都是在App.vue下面进行切换的，可以理解为所有的组件都是App.vue的子组件，我们可以把头部和底部及每个页面都出现的内容放在App.vue里面

③index.html文件入口

④src放置组件和入口文件

⑤config中配置了路径端口值等

⑥build中配置了webpack的基本配置、开发环境配置、生产环境配置等

⑦node_modules为依赖的模块