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

原文地址:https://www.cnblogs.com/agsol/p/12070883.html

时间: 2024-10-08 14:36:55

vue项目及插件的相关文章

Vue项目功能插件

目录 Vue项目功能插件 1.vue-router 2.vuex 3.vue-cookies 4.axios Vue项目功能插件 1.vue-router { path: '/', name: 'home', // 路由的重定向 redirect: '/home' } { // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签 path: '/one-view', name: 'one', component: () => import('./views/On

如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolv

vue项目全局引入vue-awesome-swiper插件做出轮播效果

在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托管在GitHub中,供下载并理解. vue项目自动生成完毕后,继续在命令行窗口输入cd swiper-test,将目录切换到swiper-test. 下面就开始启动vue项目了,输入启动命令行:npm run dev. 打开浏览器输入网址:localhost:8080 环境搭好了,进入主题,要想引入

创建一个vue 项目 必备的几个插件

第一步npm安装 首先:先从nodejs.org中下载nodejs 打开控制命令行程序(CMD),node -v 检查是否正常 使用淘宝NPM 镜像 npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org 第二步项目初始化 1.第一步:安装vue-cli cnpm install vue-cli -g      //全局安装 vue-cli 2.新建vue项目 vue init webpack  "项目名称"

通过cordova将vue项目打包为app

准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境.下面开始对vue.js项目进行打包,打包环境为Android. 1.添加cordova项目 $  cordova create myApp1 org.apache.cordova.myApp myApp2 其中: myApp1:cordova目录名 org.apache.cordova.myApp: 包名 myApp2: 项目名(在config.xml的<name>中查看) 2.在vue中添加cordova的配置 myAp

vue项目总结,所用到的技术点

1.用到的技术点 vue 是一个渐进式JavaScript框架 npm install vue vue-route 是一个路由匹配功能 npm install vue-router vue-resource 发送ajax请求的 npm install vue-resource vue-preview 图片预览插件 npm i vue-preview -S vuex 组件传值 npm install vuex --save mint-ui 基于vue的移动端组件 npm i mint-ui -S

vue 项目搭建

cli 方式安装      集成了内置webpack 模块 安装步骤   1.全局安装 vue-cli $ npm install --global vue-cli 2. 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project 3.安装依赖,走你 $ cd my-project $ npm install $ npm run dev 如果npm安装慢的话 可以使用淘宝镜像 npm install -g cnpm --registry=https:/

如何快速把 Vue 项目升级到 webpack3

由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下: 测试目标 以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响 平台:M5 Note Build/MRA58K 系统:android 6.0 时间 before after 2017-08-10 13:00 920 511

如何在 vue 项目里正确地引用 jquery

转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fa