vue项目及插件
vue项目的创建
方法1:
cmd中执行 vue ui
vue会创建一个socket,方便快捷
方法2:
命令行建立
vue create v-proj //创建项目名为v-proj的项目文件
>>>default (bable,eslint) //默认
manually select features //自定义
(*)bable //把es6语法解析为es5语法(防止沙雕浏览器无法解析es6)
TypeScript //js编程还是ts编程
Progressive Web App(PWA) Support //前端优化组件,需要大量配置
(*)Router //前台路由
(*)Vuex //仓库 ,相当于全局的单例,每次页面刷新,重新加载仓库,为移动端准备,因为移动端不刷新
CSS Pre-processors //css预编译器 less sass两个语法来进行css逻辑编译时,先将他们预编译为css语法
Linter/Formatter //格式化代码,只有按照这个标准书写才不会报错
Unit Testing // 测试
E2E Testing // 测试
>>>
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y //路由蝌蚪使用浏览器历史记录,Y
Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
> In package.json //配信信息放的位置
Save this as a preset for future projects? (y/N) N
//N
npm run server //启动服务
重构依赖
vue根据配置冲洗你构建依赖
文件夹中必须含有public,src,package.json这三个文件,
cd到这三个文件的 文件夹目录下
执行npm install
若还缺少其他依赖,根据提醒使用npm逐个安装即可.
pycharm管理vue项目
添加vue组件加载,保持长连接
vue项目目录结构
├── 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等配置文件
vue项目生命周期
启动项目就是启动了node-modules,再加载main.js
-
启动项目,加载主脚本文件main.js
加载vue环境,创建跟组件完成渲染
读取app.vue组件,并在public的index.html中渲染
加载系统已有的第三方话环境:router,store
加载自定义的第三方环境与自己配置的环境:后期项目不断添加.
-
router被加载,解析router文件夹下的index.js脚本文件,完成 路由-组件 的映射关系(加载views中的大组件)
-
新建视图组件.vue(在views文件夹中,在路由中配置),设置路由的跳转,加载component中的小组件.
总结:浏览器请求/user=>router插件映射user.vue组件=>user.vue组件替换App.vue中的<router-view />占位符
注意:1.可以使用<router-link to="/user">用户页</router-link>来完成标签跳转
2.this.$router.push("/user")可以完成逻辑跳转
vue文件式组件
<!--template负责组件的html结构,有且只有一个根标签-->
<template>
<div class="home">
<h1>zhuye</h1>
</div>
</template>
<!--script标签负责js逻辑 逻辑固定导出,外界才可以导入 export default{导出内容}-->
<script>
export default {
data(){},
methods :{},
}
</script>
<!--style标签负责组件的css样式 谁想保持样式不变,谁就加上scoped,scoped可以将css局部化-->
<style scoped>
</style>
全局自定义样式配置
方法1:
在根组件app.vue中直接配置.
方法2:
在静态文件夹assets中新建css文件夹,在文件夹中书写全局css文件.并在main.js中使用import 导入
import "./assets/css/global.css"
方法3:
官方建议:
在静态文件夹assets中新建css文件夹,在文件夹中书写全局css文件.并在main.js中使用require导入
require('@/assets/css/global/css')
注意:在导入文件的时候,可以使用@来表示直接找到src文件夹
css文件后缀名不可以省
vue组件的生命周期钩子
<https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA>
将vue组件的生命周期看作一个数轴,钩子就是在这个数轴上的节点,每个钩子对应不同的时期,每个钩子都是一个回调函数,达到某个钩子的触发点,就可以触发回调函数.
每个钩子都作为组件的实例成员单独作用.
常用
- created(){} 创建组件的时候调用,可以用来完成后台数据的请求
- mounted(){} 组件加在完成后触发,特别耗时的大文件,可以延后到组件初步加载成功后,再慢慢请求.
router方法
-
<router-view></router-view>页面组件占位符,写在app.vue根组件中<template> <div id="app"> <router-view></router-view> </div> </template> -
<router-link :to="{name: 'course'}">汽车页</router-link>相当于一个特殊的a标签等价于拥有
class="router-link-exact-active router-link-active"属性的a标签 -
this.$router 返回一个vuerouter对象
this.$route 返回一个字典
-
this.$router.push("/home") 组件跳转
push方法不可以当前页面跳转当前页面
-
this.$route.path 表示当前页面
路由逻辑跳转
-
this.$router.push("/home") 组件跳转
push方法不可以当前页面跳转当前页面
-
this.$router.go(-1) 数字表示相对当前页面的历史记录,正表示前进,负表示后退,数字的绝对值表示步数.
路由重定向
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
redirect: '/', // 路由的重定向
},]
路由传参
方式1:/car/detail?pk=1
发送方
//通过url,反引号中使用字符串format带参数
this.$router.push(`/course/detail?pk=${pk}`);
接收方:
//通过route字典中query的pk取值
this.pk = this.$route.query.pk //query叫拼接参数
配置
path: '/course/detail',
name: 'course-detail',
component: CourseDetail
方式2:car/detail/1
发送方
//
this.$router.push({
name: 'course-detail',
query: {pk: pk}});
接收方
this.$route.params.pk; //params路径参数
配置
path: '/course/:pk/detail', //:pk是有名分组
name: 'course-detail',
component: CourseDetail
注意
-
es6语法中的导入
import 别名 form "资源"es6中所有的导入,只能导入别人的导出,有导出才能导入
-
在导入文件的时候,可以使用
@来表示src文件夹的绝对路径,使用@后,不会自动提示之后的路径
