欢迎来到【一个正经的程序员】的博客园,笔者会经常分享一些大家在工作中经常用到的技术,欢迎大家围观!如果小伙伴们有需要讲解的技术,可以给笔者发消息或邮件留言!【louis.liu.oneself@hotmail.com】

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父子组件传值以及父调子方法、子调父方法

 

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

posted @ 2020-08-09 21:03  一个正经的程序员!  阅读(634)  评论(0编辑  收藏  举报
……