Vue.js环境搭建、安装Vue-cli脚手架、Visualstudiocode_第1页
Vue.js环境搭建、安装Vue-cli脚手架、Visualstudiocode_第2页
Vue.js环境搭建、安装Vue-cli脚手架、Visualstudiocode_第3页
Vue.js环境搭建、安装Vue-cli脚手架、Visualstudiocode_第4页
Vue.js环境搭建、安装Vue-cli脚手架、Visualstudiocode_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Vue.js环境搭建、安装Vue-cli脚⼿架、Visualstudiocode⽬录本章简介⽬前典型的前端三⼤框架：Angular.js、React.js、Vue.js。其中，Vue.js框架更容易上⼿，灵活度更⾼，在企业级开发中受到前端开发⼈员的青睐，所以本书的⼤觅项⽬采⽤的vue.js框架完成。任务1⼤觅项⽬业务场景1.1⼤觅项⽬业务分析⼤觅项⽬的业务类型属于票务销售，⾸先分析⼀下⼤觅项⽬的业务，如下图：1.2⼤觅项⽬技术栈选型本项⽬选择的核⼼技术是前端组件化框架Vue.js,因此确定了Vue.js+Webpack这套技术栈，也是⽬前最⽕的技术栈之⼀。⼤觅项⽬的技术栈选型分析如下：安装Node环境安装淘宝镜像CNPM安装Vue-cli脚⼿架，初始化vue项⽬安装配置iView框架页⾯路由选择使⽤vue-router插件完成Vue项⽬中使⽤VueX进⾏数据共享管理选择使⽤ECMAScript6语法编写JavaScript选择Vue官⽅推荐的axios插件发送异步请求⼤觅项⽬为前后端完全分离的项⽬，需要的后台数据通过Mock数据进⾏模拟任务2⼤觅项⽬环境搭建⼤觅项⽬的环境搭建依赖于Node.js的环境，所以接下来介绍Node.js的安装以及NPM包管理⼯具的安装、配置等。2.1Node.js的介绍Node.js是⼀个基于ChormeV8引擎的JavaScript运⾏环境。Node.js使⽤了⼀个事件驱动、⾮阻塞式I/O的模型，既轻便⼜⾼效。Node.js安装：根据电脑的不同系统位数进⾏下载对应安装包，⼀直“下⼀步”就可以了。检验Node.js是否安装成功：**1.**Win+R调出运⾏窗⼝，输⼊cmd回车：2.在命令提⽰符窗⼝⾥⾯输⼊node-v，查看你安装node.js的版本：2.2什么是NPMNPM是Node.js的包管理器，是全球最⼤的开源库⽣态系统，它集成在Node.js中，所以在安装Node.js的时候就已经⾃带NPM包管理器，⽆需我们⾃⼰单独安装。检验NPM是否安装成功：在命令提⽰符窗⼝⾥⾯输⼊npm-v，查看你安装npm的版本：NPM安装成功后，全局安装express框架，在命令提⽰符窗⼝输⼊：npminstallexpress-g2.3安装CNPM2.4安装Vue-cli脚⼿架Vue-cli是⼀个官⽅命令⾏⼯具，可⽤于快速搭建⼤型单页⾯应⽤。使⽤CNPM全局安装Vue-cli：在命令提⽰符窗⼝输⼊：cnpminstallvue-cli-g检验Vue-cli是否安装成功：在命令提⽰符窗⼝⾥⾯输⼊：vue-V，查看你安装的Vue-cli的版本号：2.5安装Webpack使⽤CNPM全局安装webpack：由于webpack4.0以上版本容易报错，我们安装3.5.5版本的进⾏配置，在命令⾏窗⼝中输⼊：npminstallwebpack@3.5.5-g2.6创建项⽬dm在命令提⽰符窗⼝输⼊：vueinitwebpackdm命令交互含义：Projectname：项⽬名称，可以直接回车Projectdescription：项⽬的描述内容，可以⾃定义Author：项⽬的作者，可以写上⾃⼰的邮箱Vuebuild：打包的⽅式，这⾥可以直接回车Installvue-router（Y/n)？：是否安装Vue路由，建议选YUseESLinttolintyourcode（Y/n)？：是否启⽤ESlint检测，建议选nSetupunittests（Y/n)？：是否需要单元检测，建议选nSetupe2etestswithNightwatch（Y/n)：是否需要端对端的检测，建议选n2.7启动项⽬dm1.⾸先进⼊项⽬⽬录中，在命令提⽰符窗⼝输⼊：cddm2.项⽬依赖模块：在命令⾏窗⼝输⼊：cnpminstall3.最后启动项⽬，在命令⾏窗⼝输⼊：npmrundev2.8安装开发⼯具VisualStudioCode根据电脑的不同系统位数进⾏下载对应安装包，⼀直“下⼀步”就可以了。上⾯我们已经使⽤npm安装了项⽬dm，我们在VisualStudioCode中打开该⽬录，结构如下：⽬录解析：任务3前端架构设计3.1分层架构&模块化⼤觅项⽬采⽤的MVVM分层架构设计，把功能相似、抽象级别相近的实现进⾏分层，使逻辑变得清晰，容易理解和维护。分层架构的主要优势在于：易维护、可扩展、易复⽤、灵活性⾼，因此深受前端⼯程师喜爱。**模块化：**是在使⽤分层架构的同时需要使⽤的⼀种重要技术，是指解决⼀个复杂问题时⾃顶向下逐层把系统划分成若⼲模块的过程。模块化⽤来分割、组织和打包软件，每⼀个模块完成⼀个特定的⼦功能，所有的模块按照某种⽅法组装起来，成为⼀个整体，完成整个系统的功能。主要的模块化解决⽅案有：AMD（requirejs）、CMD（seajs）、CommonJS、ES6，⼤觅项⽬使⽤的是ES6进⾏代码开发，⼤觅项⽬架构设计如下图：3.2分离⽅式分离⽅式的种类主要分为三种：不分离、部分分离、完全分离。不分离：前后端共⽤⼀个项⽬⽬录，本地开发环境搭建成本⾼，项⽬⽐较复杂、不宜维护且维护成本⾼、发布风险⾼，不利于问题的定位和修改。部分分离：本地开发环境搭建成本⾼，需要后端提供页⾯模板，更新和修改模板需要后端⼈员操作，效率低且不易维护，发布⽅式需要同时发布，且沟通成本⽐较⾼。完全分离（分布式）：完全分离⼜分为两种，分离开发集成部署和分离开发分离部署，⼤觅项⽬采⽤的第⼆种：分离开发分离部署。前端使⽤纯HTML通过接⼝的⽅式进⾏数据的交互，降低系统的复杂度，部署时单独部署到⼀台服务器上，使⽤代理进⾏数据的交互。3.3UI框架**UI框架的优点：**快速搭建Web页⾯、集中精⼒完成业务代码、缩短开发周期。**UI框架的缺点：**冗余代码、⽆法定制化、精细化开发。通过对搭配Vue使⽤的UI框架的筛选，我们⼤觅项⽬采⽤的UI框架是iView。iView框架是⼀套基于Vue.js的开源UI组件库，主要服务于PC界⾯的中后台产品。iView框架特性：⾼质量、功能丰富友好的API，⾃由灵活地使⽤空间细致、漂亮的UI事⽆巨细的⽂档可⾃定义主题iView框架的安装与引⼊：（1）安装：打开命令提⽰符窗⼝，进⼊项⽬⽬录dm，执⾏安装命令：cnpminstalliview--save（2）引⼊：在Webpack的⼊⼝页⾯main.js中做如下配置：importiViewfrom'iview';//引⼊iView框架import'iview/dist/styles/iview.css';//引⼊iView框架样式VUe.use(iView);//使⽤iView框架上机测试iView框架是否引⼊成功：在srccomponents⽂件夹下打开HelloWorld.vue⽂件，将class名为hello的div内部标签全部删除，替换为iView框架的button组件：<divclass="hello"><Buttontype="success">Sucess</Button></div>3.4构建⼯具webpackWebpack可以将多种静态资源js、css、less转换成⼀个静态的⽂件，减少页⾯的请求，同时也减少转义less或ES6语法等⼯作，⼤⼤地提⾼了开发效率。(1）新建⼀个⽂件夹webpack，使⽤VisualStudioCode打开，在命令⾏窗⼝输⼊初始化命令：npminit，创建⼀个package.json。(2)在webpack⽂件夹下创建src⽂件夹，在此⽂件夹下新建⼀个index.js⽂件，在index.js⽂件中添加以下代码：document.write(“HelloWorld！”)(3)在webpack⽂件夹下新建⼀个index.html⽂件，代码如下：<html><head><metacharset="utf-8"><body><scripttype="text/javascript"src="build.js"charset="utf-8"></script>

人人文库> 全部分类> 图纸下载 > 毕业设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论