Vue3——Vue CLI

Vue CLI1、Vue CLI简介2、Vue CLI的安装3、创建项目3.1、使用vue create命令3.2、使用图形界面4、项目结构4.1、App.vue文件4.2、main.js文件4.3、index.html文件5、编写一个单文件组件在开发大型项目时需要考虑项目的组织结构、项目构建和部署等问题。如果手动完成这些配置工作工作效率会非常低。为此Vue.js官方提供了一款脚手架生成工具Vue CLI通过该工具可以快速构建项目并实现一些项目的初始配置。1、Vue CLI简介Vue CLI是一个基于Vue.js进行快速开发的完整系统。新版本的Vue CLI的包名由原来的vue-cli改成了vue/cli。Vue CLI有几个独立的部分下面分别进行介绍。CLICLI是全局安装的npm包提供了一些vue命令。通过vuecreate命令可以快速搭建一个新项目通过vue serve命令可以构建新想法的原型通过vue ui命令可以使用图形化界面来管理项目。CLI服务CLI服务(vue/cli-service)是一个开发环境依赖它是一个npm包本地安装在vue/cli创建的每个项目中。CLI服务构建于webpack和webpack-dev-server之上包含以下内容加载其他CLI插件的核心服务。一个为绝大部分应用优化过的内部webpack配置。项目内部的vue-cli-service命令提供serve、build和inspect命令。CLI插件CLI插件是向Vue项目提供可选功能的npm包。在项目内部运行vue-cli-service命令时它会自动解析并加载package.json文件中列出的所有CLI插件。CLI插件可以作为项目创建过程的一部分也可以后期加入项目中。2、Vue CLI的安装Vue CLI是应用node编写的命令行工具需要进行全局安装。如果想安装它的最新版本需要在命令提示符窗口中输入如下命令npminstall-gvue/cli如果想安装vue/cli的指定版本可以在上述命令的最后添加“”符号在“”符号后添加要安装的版本号。例如要安装vue/cli 5.0.6版本输入如下命令npm install -g vue/cli5.0.6安装完成之后可以在命令行中执行如下命令来检查版本是否正确并验证Vue CLI是否安装成功vue--version如果在窗口中显示了Vue CLI的版本号则表示安装成功。3、创建项目使用Vue CLI创建项目有两种方式一种是使用vuecreate命令进行创建另一种是通过vue ui命令启动图形界面进行创建。3.1、使用vue create命令在命令提示符窗口中选择好项目的存储目录。使用vuecreate命令创建一个名称是myapp的项目输入如下命令vue create myapp执行命令后会提示选择一个preset预设​。一共有3个选项前两个选项是默认设置适合快速创建一个项目的原型。第3个选项“Manually select features”需要手动对项目进行配置。这里使用方向键↓选择“Manually select features”选项如图所示。按Enter键此时会显示项目的配置选项。这些配置选项的说明如表所示。选项说明Babel转码器用于将ES6代码转换为ES5代码TypeScript微软开发的开源编程语言编译出来的JavaScript可用于任何浏览器Progressive Web App(PWA) Support支持渐进式Web应用程序Router路由管理VuexVue的状态管理器CSS Pre-processorsCSS预处理器如LessLinter / Formatter代码风格检查和格式校验Unit Testing单元测试E2E Testing端到端测试通过键盘中的上下方向键进行移动应用空格键进行选择这里保持默认的Babel和Linter /Formatter的选中状态如图所示。按Enter键此时会提示选择项目中使用的Vue的版本这里选择默认的3.x版本如图所示。按Enter键此时会提示选择代码格式和校验选项的配置。第一个选项是指ESLint仅用于错误预防后三个选项是选择ESLint和哪一种代码规范一起使用。这里选择默认选项如图所示。按Enter键此时会提示选择代码检测方式这里选择默认选项“Lint on save”​保存时检测​如图所示。按Enter键此时会提示选择配置信息的存放位置。第一个选项是指在专门的配置文件中存放配置信息第二个选项是将配置信息存储在package.json文件中。这里选择第一个选项如图所示。按Enter键此时会询问是否保存当前的配置。如果选择了保存以后再创建项目时就会出现保存过的配置直接选择该配置即可。输入y表示保存如图所示。按Enter键此时会提示为当前配置定义一个名字如图所示。输入名字后按Enter键开始选择使用包管理器yarn或npm这里选择npm。按Enter键开始创建项目。创建完成后的效果如图所示。根据提示在命令提示符窗口中输入命令cd myapp切换到项目目录然后输入命令npm run serve运行项目。项目运行后在浏览器中访问http://localhost:8080/生成的页面如图所示。要终止项目的运行在命令提示符窗口中按CtrlC组合键即可。接下来做一个简单的修改。打开src/App.vue文件将传递给组件的msg属性的值修改为“快使用Vue CLI构建你的项目吧”​代码如下templateimgaltVue logosrc./assets/logo.pngHelloWorldmsg快使用Vue CLI构建你的项目吧//templatescriptimportHelloWorldfrom./components/HelloWorld.vueexportdefault{name:App,components:{HelloWorld}}/scriptstyle#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}/style保存文件后浏览器会自动刷新页面结果如图所示。在应用Vue CLI脚手架创建项目之后可以根据实际的需求对项目中的文件进行修改从而构建比较复杂的应用。3.2、使用图形界面使用图形界面创建项目需要使用vue ui命令。在命令提示符窗口中输入vue ui命令按Enter键后会在浏览器窗口中打开创建Vue项目的图形界面管理程序。在管理程序中可以创建新项目、管理项目、配置插件和执行任务等。通过图形界面创建新项目的界面如图所示。左上角选择项目管理器-新建项目根据图形界面中的提示就可以分步完成项目的创建。4、项目结构前面通过Vue CLI创建的项目在创建完成后在当前目录下会自动生成项目文件夹myapp。项目目录结构如图所示。下面对几个关键的文件代码进行解析包括src文件夹下的App.vue文件和main.js文件、public文件夹下的index.html文件。4.1、App.vue文件该文件是一个单文件组件在文件中包含了模板代码、组件代码和CSS样式规则。代码如下templateimgaltVue logosrc./assets/logo.pngHelloWorldmsg快使用Vue CLI构建你的项目吧//templatescriptimportHelloWorldfrom./components/HelloWorld.vueexportdefault{name:App,components:{HelloWorld}}/scriptstyle#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}/style在上述代码中使用import语句引入了HelloWorld组件并且在template元素中使用了该组件。App组件是项目的根组件。在实际开发中可以修改代码中的import语句将引入的组件替换为其他组件即可。4.2、main.js文件该文件是程序入口的JavaScript文件主要用于加载公共组件和项目需要用到的各种插件并创建Vue的根实例。代码如下import{createApp}fromvueimportAppfrom./App.vuecreateApp(App).mount(#app)在上述代码中使用import语句引入createApp。与HTML文件中使用script标签引入Vue的js文件不同使用Vue CLI创建的项目引入模块都采用这种方式。4.3、index.html文件该文件为项目的主文件文件中有一个id属性值为app的div元素组件实例会自动挂载到该元素上。代码如下!DOCTYPEhtmlhtmllangheadmetacharsetutf-8metahttp-equivX-UA-CompatiblecontentIEedgemetanameviewportcontentwidthdevice-width,initial-scale1.0linkreliconhref% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbodynoscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdividapp/div!-- built files will be auto injected --/body/html5、编写一个单文件组件将一个组件的HTML、JavaScript和CSS应用各自的标签写在一个文件中这样的文件即为单文件组件。单文件组件是Vue自定义的一种文件以.vue作为文件的扩展名。下面以之前创建的项目myapp为基础通过一个实例来说明如何在应用中使用单文件组件。示例输出电影信息。在项目中使用单文件组件定义电影信息包括电影图片、电影名称和电影简介。具体步骤如下。在src/assets文件夹下新建images文件夹并存入一张图片ald.jpg。在src/components文件夹下创建MyMovie.vue文件代码如下templatedivimg:srcimgUrldivclassmovie_name1电影名称{{name}}/divdivclassmovie_des1电影简介{{ intro }}/div/div/templatescriptexportdefault{data(){return{imgUrl:require(/assets/images/ald.jpg),name:阿拉丁,intro:超越原版动画的真人电影}}}/scriptstylescopedlangscssbody{font-family:微软雅黑;}img{width:30px;}.movie_name{padding-left:10px;font-style:18px;color:#333;margin-top:8px;}.movie_des{padding-left:10px;font-style:14px;margin-top:5px;}/style在默认情况下单文件组件中的CSS样式是全局样式。如果需要使CSS样式仅在当前组件中生效需要设置style标签的scoped属性。打开App.vue文件将HelloWorld组件替换为MyMovie组件。修改后的代码如下templateMyMovie/MyMovie/templatescriptimportMyMoviefrom./components/MyMovie.vue;exportdefault{name:App,components:{MyMovie}}/scriptimport语句中的“”表示src目录该字符可以简化路径。引入的MyMovie组件可以不写扩展名.vue因为项目内置的webpack可以自动添加扩展名.vue。运行项目在浏览器中访问http://localhost:8080/输出结果如图所示。