vue入门基础（二）
vue-cli项目
是一个Vue官方提供的脚手架，用于快速生成一个Vue的项目模板。
预先定义好的目录结构以及基础代码，就好比在创建maven项目式可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速。
主要的功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
vue-cli安装配置看博客
模块化的演进
JS
使用js加载有一个弊端
全局作用域下容易造成变量冲突
文件只能按照< script>的书写顺序进行加载
开发人员必须按照主观解决模块和代码快的依赖关系
在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪。
CommonsJS
服务器端的nodejs遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需要依赖的其他模块，然后通过exports或者module.exports来导出需要暴露的接口
- 优点1：
服务器端模块便于重用
NPM中已经有超过45万个可以使用的模块包
简单易用
- 缺点：
同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
不能非阻塞的并行加载多个模块
- 实现：
服务器端的nodejs
Browserify，浏览器端的CommonsJS实现，可以使用NPM的模块，但是编辑打包后的文件体积比较大
modules-webmake，类似browserify，但是不如browserify灵活
wreq，browserify的前身
AMD
- 优点：
适合在浏览器环境中异步加载模块
可以并行加载多个模块
- 缺点：
提高了开发成本，代码的阅读和书写比较困难难，模块定义方式的语义不畅
不符合通用的模块化思维方式，是一种妥协的实现
- 实现：
RequireJS
curl
CMD
和AMD很相似，尽量保持简单，并且在CommonsJS和nodeJS的modules规范保持了很大的兼容性
- 优点：
依赖就近，延迟执行
可以很容易在nodeJS中运行
- 缺点：
依赖SPM打包，模块的加载逻辑偏重
- 实现：
sea.js
coolie
ES6模块
- 优点：
容易进行静态分析
面向未来的EcmaScript标准
- 缺点：
原生浏览器端还没有实现该标准
全新的命令，新版的NodeJs才支持
- 实现：
babel
webpack学习
现代JS应用程序的静态模块打包器，当webpack处理应用程序时，它会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或者多个bundle
模块加载兼打包工具，可以把各种资源，JS JSX ES6 SASS LESS 图片等都作为模块来处理和使用
node.js遵循commons.js规范
- export 暴露接口
- import引用接口
- require加载模块
安装
npm install webpack -g
npm install webpack -cli -g
- 1
- 2
测试安装成功
webpack -v
webpack -cli -v
- 1
- 2
配置
创建webpack.config.js配置文件
直接运行webpack命令打包
使用webpack
1、创建项目
2、创建一个名为modules的目录，用于放置JS模块等资源文件
3、在modules下创建模块文件，如hello.js，用于编写js模块相关代码
//暴露一个方法
exports.sayHi=function(){
document.write("<h1>世界如此美妙</h1>");
}
exports.sayHi2 = function() {
document.write("<h1>hello</h1>")
}
exports.sayHi3 = function() {
document.write("<h1>hello</h1>")
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
4、在modules下创建一个main.js的入口文件，用于打包时设置entry属性
var hello= require("./hello");
hello.sayHi();
hello.sayHi2()
- 1
- 2
- 3
- 4
5、在项目目录下创建webpack.config.js配置文件
module.exports = {
//入口
entry:'./modules/main.js',
//输出
output:{
filename:'.js/bundle.js'
}
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
6、输入打包命令webpack
在idea控制台直接执行 webpack ，如果失败就使用管理员的权限打开idea
7、在项目目录下创建HTML页面，如index.html，导入webpack打包后的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--前端的模块化开发-->
<!--引入打包后的js文件-->
<script src="dist/js/bundle.js"></script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
8、运行HTML查看效果
vue-router路由
vue router 是vue.js官方的路由管理器，他和vue.js的核心深度集成，让构建单页面应用变的易如反掌，包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、、通配符
- 基于vue.js过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的CSS的链接
- HTML历史模式或者hash模式，
- 自定义的滚动条行为
vue+elementUI
前端界面可以选择elementUI来做
elementUI 查看组件
安装一个新的程序
//创建一个hello-vue的工程
vue init webpack hello-vue
//进入工程目录
cd hello-vue
//安装vue-router
npm install vue-router --save-dev
//安装elementUI
npm i element-ui -S
//安装依赖
npm install
//安装sass加载器
cnpm install sass-loader node-sass --save-dev
//启动测试
npm run dev
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
1、创建首页视图。在views目录下创建一个名为Main.vue的视图组件：
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: 'Main'
}
</script>
<style scoped>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
2、创建登录页视图，在views目录下创建一个名为Login.vue的视图组件，其中el-*的元素为elementUI组件
<template>
<div>
<el-form ref="loginform" :model="form" label-width="80px">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item >
<el-button type="primary" v-on:click="onSubmit('loginfrom')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>请输入账号和密码</span>
<span slot="footer" class="el-dialog__footer">
<el-button type="primary" @click="dialogVisible=false">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
</style>
- 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
- 29
- 30
- 31
- 32
- 33
- 34
- 35
3、创建路由，在router目录下创建一个名为index.js的vue-router的路由配置文件
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/main',
component: Main
},
{
path: '/login',
component: Login
}
]
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
4、绑定APP.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style scoped>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
5、main.js
import router from './router'
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(router)
Vue.use(ElementUI)
Vue({
el: '#app',
router,
render: h => h(App)
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
路由嵌套
路由嵌套又称为子路由，通常由多层嵌套的组件组合而成，URL中各段动态路由也按照某种结构对应嵌套的各层组件
欢迎斧正~
文章来源: blog.csdn.net，作者：张艳伟_Laura，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/Laura__zhang/article/details/120248250
- 点赞
- 收藏
- 关注作者
评论（0）