Vue-Cli

Posted xgbky

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-Cli相关的知识,希望对你有一定的参考价值。

组件开发自动化工具

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 applicationSPWA),就是将系统所有的操作交互限定在一个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-middlewarewebpack-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/>,一般默认已经写好

以上是关于Vue-Cli的主要内容,如果未能解决你的问题,请参考以下文章

vue入门教程

vue全家桶

Vue.js-扩展学习-3

vue3.x新增特性

vue3.x新增特性

vue3.x新增特性