1219 Vue项目创建及基础
vue项目
js原型补充
prototype 类似于给类添加类属性
function A(){}
let a1 = new A();
let a2 = new A();
为A添加原型
A.prototype.num = 100;
console.log(a1.num)
推导
Vue.prototype.$ajax = 12345
可以通过 this.$ajax获取属性12345
1. 项目创建
cmd创建
cd至创建文件的文件夹
vue create v-proj(项目名)
选择自定义创建
Babel 兼容ES5语法,把ES6语法解析为ES5语法
Router 前台路由
Vuex 仓库 相当于全局的单例(为移动端服务)
Linter / Formatter 规范代码编写(目前不用,做项目用)
选项:
第一次创建会下载配置依赖
文件较多
可视化创建
vue ui
会自动启动socket客户端界面 8000
可视化创建
2. 项目启动
npm run server
关闭cmd即关闭项目
使用pycharm连接
vue重新构建依赖
核心文件:
public文件夹
src文件夹
package.json 文件
cd到缺少依赖的文件夹中
cmd输入 cnpm install
自定义安装模块cnpm install 模块组件名
自动创建models文件夹
pycharm管理vue项目
使用pycharm打开创建好的项目
自定义解析方式,使用
npm设置参数
安装解析vue
3. 项目目录介绍
├── v-proj
| ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境
| ├── public
| | ├── favicon.ico // 标签图标
| | └── index.html // 当前项目唯一的页面
| ├── src
| | ├── assets // 静态资源img、css、js
| | ├── components // 小组件
| | ├── views // 页面组件
| | ├── App.vue // 根组件
| | ├── main.js // 全局脚本文件（项目的入口）
| | ├── router
| | | └── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
| | └── store
| | | └── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
| ├── README.md
└ └── package.json等配置文件
index.html
当前项目唯一的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
适配ie浏览器
<meta http-equiv="X-UA-Compatible" content="IE=edge">
适配手机端
<meta name="viewport" content="width=device-width,initial-scale=1.0">
定义页面图标
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>v-proj</title>
</head>
<body>
定义页面不支持js之后的提示
<noscript>
<strong>We're sorry but v-proj doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
根组件的模板替换的挂载点
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
index.js
路由
定义了路由的url配置
const routes = [
{
path: '/',
name: 'home',
component: Home
},
App.vue
根组件
定义了小组件的组合,页面的跳转
main.js
全局脚本文件,项目的入口
main.js
导入
加载了文件资源
import 别名 form '资源'
如果导入的资源直接是名字,一定是在node_modules文件夹中
. 是当前,文件可以省略后缀
导出
main导入的资源都是导出的
export default '资源组件'
// 导入项目文件资源
// import 别名 from 资源
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 安装软件的使用引导说明
Vue.config.productionTip = false;
// 根组件
// new Vue({
// router,
// store,
// render: h => h(App)
// }).$mount('#app'); // 挂载点
// 转换根组件
new Vue({
el:'#app',
router:router, //路由
store:store, // 仓库
// 定义render的渲染函数,进行页面的渲染,创建vue即渲染
render:function (read_vue_fn) {
// 将读取的二进制流返回出去
return read_vue_fn(App)
}
});
components文件夹
在文件夹中定义子组件(小组件),在views文件夹中定义页面组件时
必须先导入 import nav from '组件所在路径'
然后注册才能使用
<nav> </nav>
4. 项目生命周期
1.启动项目
- 加载主脚本文件
main.js - 加载vue环境,创建根组件完成渲染
- 加载系统已有的第三方环境:
router,store - 加载自定义的第三方与自己配置的环境:后期项目不断添加
2.router被加载
- 就会解析
router文件夹下的index.js脚本文件,完成"路由-组件"的映射关系
3.视图
- 新建视图组件
.vue(在views文件夹中) - 在路由中配置
(在router的index.js中) - 设置路由跳转
(在导航栏组件中Nav.vue)
app渲染
页面组件的占位符<router-view></router-view>
<template>
<div id="app">
// 页面组件占位符
<router-view></router-view>
</div>
</template>
5. 文件式组件
页面组件
views文件夹中定义页面组件
- template标签负责组件的html结构,有且只有一个根标签
- script标签负责组件中的js逻辑:逻辑固定导出(外界才可以导入),方式:
export default {组件内容} - style标签负责组件的css样式:
scoped保证样式的组件化 - 样式只在该组件内部起作用
<!--template标签负责组件的html结构,有且只有一个根标签-->
<template>
<div class="home">
<h1>主页</h1>
<hr>
<Nav></Nav>
</div>
</template>
<!--script标签负责组件中的js逻辑:逻辑固定导出(外界才可以导入)-->
<!--export default {组件内容}-->
<script>
// 导入小组件
import Nav from '../components/Nav'
export default {
data(){
return{}
},
methods:{},
// 注册组件
components:{
Nav,
}
}
</script>
<!--style标签负责组件的css样式:scoped保证样式的组件化 - 样式只在该组件内部起作用
-->
<style scoped>
h1 {
color: red;
}
</style>
自定义全局样式
assets文件夹中定义静态资源img、css、js文件夹
创建css样式
/*全局css样式*/
html,body,h1,h2,ul {
margin: 0;
}
ul {
list-style: none;
}
在main.js中导入才能使用(官方建议加载静态文件使用require)
import '@/assets/css/global.css' // @ 符号默认代表src文件夹
import './assets/css/global.css'
import abc from './assets/css/global.css' // 定义别名abc 导入(别名使用)
require('@/assets/css/global.css'); // 官方建议加载静态文件使用require
let s = require('@/assets/css/global.css');
6. 路由跳转
标签跳转
url跳转
<router-link to="url地址"> 链接页 </router-link>
通过name跳转
<router-link :to={name:'name对应的字符'}> 链接页 </router-link>
逻辑跳转
this.$router路由跳转
// 控制路由跳转
this.$router.push('url')
利用name跳转
this.$router.path(){
name='home'
}
控制历史记录前进后退
this.$router.go(-3) // 后退3页(正为前进,负为后退,数字为步长)
this.$route路由数据
路由的地址
this.$route.path('/')
路由重定向
redirect:"url"
两个路由path对应一个component注册组件
router文件夹中index.js文件
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
component: Home
}
]
-------------------------------------------------------
可以更改为
{
path: '/home',
redirect: '/', //路由的重定向
}
7. 生命周期钩子
- 一个组件从创建到销毁的众多时间节点回调的方法
- 这些方法都是Vue组件实例的成员
- 声明周期钩子的作用就是满足在不同时间节点需要完成的事
vue实例组件的生命中的回调函数.
钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段。
咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了，总结一下，对官方文档的那张图简化一下，就得到了这张图。
beforeCreate
在实例初始化之后,数据观测和event/watcher事件配置之前被调用
created()
重要方法:在该钩子中完成后台数据的请求
实例创建之后调用
destroyed
vue实例销毁后调用
beforeMount
实例组件准备加载调用
mounted
实例组件加载完成调用
个别耗时多的数据请求,可以延后到组件初步加载成功后,再慢慢请求
昨日回顾
"""
1、组件：
html、css、js的集合体
vue实例就代表组件
组件用template实例成员管理html结构，有且只有一个根标签
子组件可以复用，所以数据要组件化处理，data的值由方法的返回值提供
2、分类：
根组件：new Vue({})，顶级组件
全局组件: Vue.component('组件名', {})，不用注册可以在任何地方使用
局部组件：let 组件名 = {}，只有在注册的父组件中才能使用
3、组件间传参：
父传子：自定义属性
<tag :info="msg"></tag>
let tag = {
props: ['info'],
}
new Vue({
data: {msg: 12345}
components: {
tag,
}
})
子传父：自定义事件
<tag @action="fn"></tag>
let tag = {
data: {msg: 12345},
methods: {
tag_fn() {
this.$emit('action', this.msg)
}
}
}
new Vue({
components: {
tag,
},
methods: {
fn(info) {}
}
})
4、vue项目环境
官网下载安装node => 将npm换源为cnpm => cnpm install -g @vue/cli
=> vue项目创建...
"""
今日总结
"""
1、创建项目：vue create 项目名 - babel、vue-router、vuex
2、项目目录：
node_modules依赖(不同电脑依赖需要重新构建)
views：页面组件
components：小组件
router/index.js：路由配置文件 - 路径与页面组件对应关系
App.vue：根组件，固定五行话(看代码)
main.js：项目总脚本文件 - 配置所有环境，加载根组件
3、vue请求生命周期：
浏览器请求/user => router插件映射User.vue组件 => User.vue组件替换App.vue中的<router-view />占位符
注： i) 可以用 <router-link to="/user">用户页</router-link>完成标签跳转
ii) this.$router.push('/user')完成逻辑跳转
4、vue组件的生命周期钩子：组件 创建 到 销毁 中的时间节点回调的方法
created(){} | mounted(){}
5、路由跳转
this.$router.push({name: '路由名', query: {拼接的参数}})
this.$router.go(number)
6、路由配置
{
path: '/course/detail',
name: 'course-detail',
component: CourseDetail
}
{
path: '/detail',
redirect: '/course/detail'
}
this.$router.push('/course/detail'); == this.$router.push('/detail');
this.$router.push('/course/detail?pk=1'); => this.$route.query.pk
```````````````````````````````````````````````````````````````````````
{
path: '/course/detail/:pk',
name: 'course-detail',
component: CourseDetail
}
this.$router.push('/course/detail/10'); => this.$route.params.pk
7、js类的原型：类属性
8、配置全局css样式
import '@/assets/css/global.css'
require('@/assets/css/global.css');
路由知识点概况：
1）路由配置：router/index.js
2）路由跳转与路由渲染：router-link、router-view、$router.push、$router.go
3）路由传参：两种传参
"""
1219 Vue项目创建及基础的更多相关文章
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...
- vue项目创建与使用
目录 复习 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 vue项目启动生命 ...
- Vue入门：Vue项目创建及启动
1. 创建Vue项目存放地址 用于存放Vue项目,找个自己处理方便的地方.本人地址:D:\Program Files\Workspace\Vue 2. 创建项目 进入cmd窗口 进入项目存放地址 执行 ...
- react & vue 项目创建的方式
创建reactApp的几种方式: create-react-app filename 适用于npm6及以下. npm init react-app filename 适用于npm6以上. npx c ...
- Vue安装以及Vue项目创建以及Vue Devtools安装
这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...
- vue项目创建
使用命令行工具npm新创建一个vue项目 使用vue开发项目的前期工作可以参考前面写的: Vue环境搭建及node安装过程整理 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. ...
- vue项目创建流程和使用
vue项目的创建 npm run dev 让项目执行起来 #下载vuex npm install vuex --save#下载axiosnpm install axios --save 当我们生成项目 ...
- Python Django Vue 项目创建
环境安装忽略,可参考前面个篇幅介绍 1.创建项目 打开pycharm 终端,输入如下,创建项目 # 进入pycharm 项目目录下 cd pyWeb django-admin startproject ...
- Vue --- 项目创建
目录 创建Vue项目之前的准备 创建Vue项目 重新构建项目 项目目录介绍 项目的生命周期 Vue文件式组件 配置自定义全局样式 路由逻辑跳转 生命周期钩子 路由传参的两种方式 创建Vue项目之前的准 ...
随机推荐
- Java的集合类之 List 接口用法
集合其实在本质上面就是数据结构,它封装了一些底层的数据结构等操作进行操作. 集合的长度是可变的,用来存放对象的引用.常见的集合类有List集合.Set集合.Map集合. 1. List接口 List是 ...
- AOP+Token防止表单重复提交
表单重复提交: 由于用户误操作,多次点击表单提交按钮 由于网速等原因造成页面卡顿,用户重复刷新提交页面 避免表单重复提交的方式: 1.页面上的按钮做防重复点击操作 2.在数据库中可以做唯一约束 3.利 ...
- Prometheus入门到放弃(5)之AlertManager部署
alertmanager与exporters.cadvisor一样,都是独立于prometheus项目,这里我们也使用docker方式部署alertmanager. 1.下载镜像 镜像地址:https ...
- Java开发笔记（一百二十）AWT文本标签
前面介绍了AWT窗口及其面板的简单用法,其中展示出来的控件只有按钮一种,还有很多好用好玩的控件有待介绍.首先是文本标签Label,该控件用于显示一段平铺文本,它不花哨也不跳动,完全就是素面朝天的文本字 ...
- 玩转Spring全家桶笔记 04 Spring的事务抽象、事务传播特性、编程式事务、申明式事务
1.Spring 的事务抽象 Spring提供了一致的事务模型 JDBC/Hibernate/Mybatis 操作数据 DataSource/JTA 事务 2.事务抽象的核心接口 PlatformTr ...
- IDEA使用@Data注解，类调用get、set方法标红的解决办法
1.在setting中,下载lombok插件,安装完成后重启idea
- VS2017 配置 boost_1_70
1. 下载与安装 1.1 安装方法1 (1) 下载 https://www.boost.org/ 或者使用 https://sourceforge.net/projects/boost/files/b ...
- 关于阿里 iconfont 的使用步骤
第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去 第二步: 在项目中,可以看到刚刚加入的图标,这里是你在项目中所有用到的iconfont,选 ...
- PHP写的简单数字验证码
用PHP写的随机生成的5位数字验证码 $yzm = ""; for($i=0;$i<5;$i++) { $a = rand(0,9); $yzm.= $a; } echo $ ...
- c++ 使用torchscript 加载训练好的pytorch模型
1.首先官网上下载libtorch,放到当前项目下 2.将pytorch训练好的模型使用torch.jit.trace导出为.pt格式 import torch from skimage import ...