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

1. 启动项目,加载主脚本文件main.js

   加载vue环境,创建跟组件完成渲染

   读取app.vue组件,并在public的index.html中渲染

   加载系统已有的第三方话环境:router,store

   加载自定义的第三方环境与自己配置的环境:后期项目不断添加.

2. router被加载,解析router文件夹下的index.js脚本文件,完成 路由-组件 的映射关系(加载views中的大组件)

3. 新建视图组件.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组件的生命周期看作一个数轴,钩子就是在这个数轴上的节点,每个钩子对应不同的时期,每个钩子都是一个回调函数,达到某个钩子的触发点,就可以触发回调函数.

每个钩子都作为组件的实例成员单独作用.

常用

1. created(){} 创建组件的时候调用,可以用来完成后台数据的请求
2. mounted(){} 组件加在完成后触发,特别耗时的大文件,可以延后到组件初步加载成功后,再慢慢请求.

router方法

1. <router-view></router-view>页面组件占位符,写在app.vue根组件中

   <template>
     <div id="app">
       <router-view></router-view>
     </div>
   </template>
   

2. <router-link :to="{name: 'course'}">汽车页</router-link>相当于一个特殊的a标签

   等价于拥有class="router-link-exact-active router-link-active"属性的a标签

3. this.$router 返回一个vuerouter对象

   this.$route 返回一个字典

4. this.$router.push("/home") 组件跳转

   push方法不可以当前页面跳转当前页面

5. 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文件夹的绝对路径,使用@后,不会自动提示之后的路径