Vue-Cli

Posted 2022-11-10 xgbky

组件开发自动化工具

Node.js是一个新的后端(后台)语言，它的语法和javascript类似，所以可以说它是属于前端的后端语言

运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上

功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。

• Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令

1 2	node -v npm

• 全局安装vue脚手架，vue-cli，这玩意儿可以自动生成项目模板

1 2	vue-cli cnpm install --global vue-cli

单页应用 SPWA

单页Web应用（single page web application，SPWA），就是将系统所有的操作交互限定在一个web页面中。

单页应用程序 (SPA)是加载单个html页面，系统的不同功能通过加载不同功能组件的形式来切换，不同功能组件全部封装到了js文件中，这些文件在应用开始访问时就一起加载完；

整个系统在切换不同功能时，页面的地址是不变的，系统切换可以做到局部刷新，也可以叫做无刷新，这么做的目的是为了给用户提供更加流畅的用户体验

• 通过vue-cli脚手架开启一个项目：

1	vue init webpack myproject

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

- Project name: 项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。 - Project description: 项目描述，直接回车 - Author：作者 - vue build: 构建方式 默认即可 - install vue-router? 是否安装vue的路由插件 - Use ESLint to lint your code? 是否使用ESLint检测你的代码？ （ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。） - Pick an ESLint preset:选择分支风格 1.standard(https://github.com/feross/standard) js的标准风格 2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github 地址说是JavaScript最合理的方法 3.none (configure it yourself) 自己配置 - Setup unit tests? 是否安装单元测试 - Pick a test runner 选择一个单元测试运行器 1.Jest（Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架） 2.Karma and Mocha 3.none - Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch （E2E，也就是End To End，就是所谓的“用户真实场景”。） - Should we run ‘npm install‘ for you after the project has been created? 项目创建后是否要为你运行“npm install”? yes,use npm(使用npm) yes,use yarn(使用yarn) no,I will handle that myself(自己操作)

• 启动开发服务器：

1 2 3

cd myproject # 进入目录 cnpm install # 安装依赖 cnpm run dev # 开启服务

vue启动服务之后，是通过一个小型的express服务进行测试开发环境部署，在这个服务中，主要是通过webpack-dev-middleware和webpack-hot-middleware这两个中间件完成，并且会在每次代码对于src目录下的代码进行修改时，服务端会动态检测并让浏览器自动刷新

• 项目目录介绍

1 2 3 4 5 6

- src # 主开发目录，所有的单文件组件都会放在这个目录下 - static # 项目静态目录，所有的css、js都会放在这个文件夹下 - dist # 项目打包发布文件夹，最后要上线单文件夹项目都在这个文件夹中 - node_modules # node的包目录 - config # 配置目录，主要用于区分开发环境，测试环境，线上环境的不同 - build # 项目打包时依赖的目录

组件开发

将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为.vue，比如：menu.vue

组件文件一般定义在src目录下的components文件夹里

• template标签定义HTML部分

1 2 3 4 5 6 7 8

<teamplate> <div class="" @click=""> <label> 账号 <input type="text"> </label> </div> </teamplate>

• js写成模块导出的形式

1 2 3 4 5 6 7 8 9

// 使用export default命令，为模块指定默认输出 export default data: function() return name:"张三", age:16,

• 样式中的编写，如果含有scope关键字，表示这些样式是组件局部的，

1 2 3 4 5 6 7 8

<style scoped> .beauty width:100px; line-height:50px; border-bottom:1px solid #ddd; margin:0px auto; </style>

路由配置

当拥有一个组件文件时，要在项目的src目录下的router目录下的index.js文件下

进行组件的路由加载配置

在导入组件文件时，可以使用@符号，代表从src目录起

比如：import index from ‘@/components/index’

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import Vue from ‘vue‘ import Router from ‘vue-router‘ import HelloWorld from ‘@/components/HelloWorld‘ import first from ‘@/components/first‘ // 从组件目录下导入组件文件，不需要加后缀 import index from ‘@/components/index‘ Vue.use(Router) export default new Router( mode: ‘history‘, routes: [ path: ‘/‘, component: index, , path: ‘/first‘, // 访问路径 component: first ] )

当配置好路由之后，需要在最主要的App.Vue文件下进行连接引入

通过<router-link to="连接地址">首页</router-link>标签进行连接引入

通过<router-view></router-view>标签进行路由加载，可以简写为：<router-view/>

1 2 3 4 5 6 7 8 9 10 11 12 13

<template> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/first">第一个页面</router-link> <router-view></router-view> </div> </template> <script> </script> <style> </style>

在App.Vue文件下的template标签处如果已经引入了其他跳转连接；

那么在子组件的template部分不需要在进行引入

总结

1. 编写components组件
2. index.js配置路由
3. 在主入口App.vue中加载路由组件<router-view/>，一般默认已经写好