Vue-Cli

时间 2019-11-19

标签 vue cli 繁體版

原文原文链接

组件开发自动化工具

Node.js是一个新的后端(后台)语言，它的语法和JavaScript相似，因此能够说它是属于前端的后端语言javascript

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

功能：后端语言能够操做文件，能够读写数据库，前端语言不能操做文件，不能读写数据库。html

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

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

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

1	vue init webpack myproject

- 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目录下的代码进行修改时，服务端会动态检测并让浏览器自动刷新node

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

组件开发

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

组件文件通常定义在src目录下的components文件夹里git

template标签订义HTML部分

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

js写成模块导出的形式

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

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

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

路由配置

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

进行组件的路由加载配置

在导入组件文件时，能够使用@符号，表明从src目录起

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

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/>

<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部分不须要在进行引入

总结

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