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为依赖的模块

 

 

推荐浏览：Vue父子组件传值以及父调子方法、子调父方法

 

喜欢的话记得推荐并收藏哦~~~