Vue项目搭建流程

Vue

简介

vue是目前前端最具前景的框架之一,能帮助我们快速搭建并开发前端项目。
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

主要特点

轻量级的框架:能够自动追踪依赖的模板表达式和计算属性,提供 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API,使读者更加容易理解,能够更快上手
双向数据绑定:声明式渲染是数据双向绑定的主要体现,也是 Vue的核心,它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。
指令:Vue与页面进行交互,主要就是通过内置指令来完成的,指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上
组件化:组件是 Vue最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
组件还支持热重载(hotreload)。当我们做了修改时,不会刷新页面,只是对组件本身进行立刻重载,不会影响整个应用当前的状态。CSS 也支持热重载。
客户端路由:Vue-router 路由插件与 Vue深度集成,用于构建单页面应用。Vue 单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,传统的页面是通过超链接实现页面的切换和跳转的。
状态管理:状态管理实际就是一个单向的数据流,State 驱动 View 的渲染,而用户对 View 进行操作产生 Action,使 State 产生变化,从而使 View 重新渲染,形成一个单独的组件

SPA和MPA对比

MPA:多页应用结构(MultiPage Application, MPA),传统的项目大多使用,,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候受网络、性能影响,浏览器会出现不定时间的空白界面,用户体验不好。
SPA:单页面应用(single page application, SPA)用户通过某些操作更改地址栏url之后,动态的进行不同模板内容的无刷新切换,用户体验好。
在这里插入图片描述

Vue中会使用官方提供的vue-router插件来使用单页面,原理就是通过检测地址栏变化后将对应的路由组件进行切换(卸载和安装)。

基础流程

1.安装node

  1. 主要用于使用npm包管理器,配置npm的环境变量
  2. 安装包下载官网地址:https://nodejs.org/zh-cn/(推荐使用长期LTS版,长期支持,稳定)
  3. 注意下载的位数,默认是win10的64位,下载mac,win7,32位等可点击官网顶部的下载。
  4. 直接一直下一步安装即可,可以更改安装路径,但还是建议默认路径安装。

2.全局安装脚手架

  1. 只需安装一次即可,两者都安装执行
  2. 安装
3.X版本安装
npm install -g @vue/cli低版本安装
npm install -g @vue/cli-init
  1. 在想要创建项目的目录下打开cmd命令行
3.X版本安装(不会看到webpack的配置文件)
vue create progress-name低版本安装(会看到webpack的配置文件,推荐使用)
vue init webpack progress-name
  1. 安装步骤详解
    a. 高版本
    a. 系统将提示您选择预设:可以选择基本Babel + ESLint设置附带的默认预设,也可以选择“手动选择功能”以选择所需的功能(推荐选择第二个,手动选择)
    在这里插入图片描述

b. 根据个人需要选择配置项(选择方法:空格即可)
在这里插入图片描述

c. 路由是否选择history模式(推荐选择 y,如果选择n,路由将默认为hash模式)
d. selint语法选择(推荐选择eslint+standard config:标准模式)
在这里插入图片描述

e. 检测方式(推荐选择lint on sava)
在这里插入图片描述

f. 文件类型(推荐使用json)
在这里插入图片描述
g. 保存当前的配置为预设,以供未来使用(推荐使用 y)
h. 保存预设并命名
在这里插入图片描述
b. 低版本
a. 前面四步都可以一路回车
b. 第五步询问是否安装vue-router,选择是
c. 第六步使用eslint代码检查,根据个人情况选择是或否
d. 第七步设置单元测试,选择否
e. 第八步测试监听,选择否
f. 第九步选择npm即可,等待安装完成
在这里插入图片描述

3. 项目目录文件夹详解

build 						构建脚本目录
config						构建配置目录
node_modules        		依赖包目录
src                         源码目录(放置所有的资源文件,一般会被webpack用来打包)
|-- api                     	接口,统一管理
|-- assets                 		静态资源,统一管理(如:css,img, js,fonts)
|-- components                  公用组件,全局文件(放置所有的子组件,即每个页面级组件的子组件)
|-- lib                         外部引用的插件存放及修改文件
|-- router                      路由,统一管理
|   |-- index.js               		配置路由信息
|-- store                       vuex, 统一管理
|-- pages                       视图目录(所有的页面级组件)
|   |-- index               		视图模块名
|   |-- |-- api                     	接口,统一管理
|   |-- |-- assets                 		静态资源,统一管理(如:css,img, js)
|   |-- |-- components               	模块通用组件
|   |-- |-- index.vue       			入口页面
|   |-- |-- Home.vue       				首页页面
|   |-- |-- My.vue       				我的页面
|-- App.vue                          入口页面
|-- main.js                          入口js文件(可在此引入公共的样式等)
static                       静态资源文件(不会最终被weback打包(一般放置图片文件和本地模拟的json数据))
index.html                   入口文件
.env						 环境变量配置文件
.gitignore					 git忽略配置文件
package.json				 项目描述文件
package-lock.json			 项目包管控文件
README.md					 项目说明文件

在package.json文件中,我们可以到开发和生产环境的配置文件入口。

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","build": "node build/build.js"}

4. 更改配置

  1. App.vue
    插入一个路由插槽,进行页面的跳转,显示不同的路由
<template><router-view></router-view>
</template>
  1. main.js
    以app做为根组件,每次在路由插槽渲染页面
new Vue({el: '#app',router,components: { App },template: '<App/>'
}) 
改为:
new Vue({el: '#app',router,render(h){return h(App)}
})
  1. router文件夹的index文件
    根据项目需求,引入对应页面,配置路由信息,进行页面跳转)( / 代表跟路径)
import Vue from 'vue'
import Router from 'vue-router'
import Index from "../pages/Index"; // 首页
Vue.use(Router);const routes = [{path: '/',name: 'Index',component: Index},{path: '/Index',name: 'Index',component: () => import(/* webpackChunkName: "My" */ '../pages/index/My'),meta: {keepAlive: false,title: '首页',}},{/*** 邀请成员加入家庭*/path: '/My',name: 'My',component: () => import(/* webpackChunkName: "My" */ '../pages/index/My'),meta: {keepAlive: false,title: '我的'}},{//缺省值,放最后path: '*',redirect: '/Index'}
]const router = new VueRouter({routes,linkExactActiveClass: "act",mode: "history",
})router.beforeEach((to, from, next) => {console.log(to, from)next()
})
router.afterEach((to, from) => {console.log(to, from)
})export default router
  1. 项目启动
3.X版本
npm run serve低版本
npm run dev
  1. 项目打包
    打包完成后会生成dist文件夹,项目上线时,直接将dist文件夹放到服务器即可。
npm run build

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401423.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

x=a%pq与x=a%p,x=a%q的关系(pq互质)

http://prayer.hustoj.com/problem.php?id1770 我们 口胡 证明一下&#xff1b; a%pa%qx; tpxat’qx; ∴tpt’q; ∵(p,q)1; 所以 tpt’q; 即 kqpk’pqtpt’q; kqpxa; a%(qp)x; #include<iostream> #include<cstdio> #include<cstring> #define L…

Vue模板语法详解

vue基础、安装、介绍双大括号&#xff08;Mustache语法&#xff0c;又叫胡子语法&#xff09;v-textv-htmlv-showv-if、v-else-if、v-elsev-show 与 v-if 的区别v-forv-for 中的 keyv-if 与 v-for 一起使用v-on&#xff08;缩写&#xff1a; &#xff09;v-bind&#xff08;缩写…

C# 中利用 Conditional 定义条件方法

利用 Conditional 属性&#xff0c;程序员可以定义条件方法。Conditional 属性通过测试条件编译符号来确定适用的条件。当运行到一个条件方法调用时&#xff0c;是否执行该调用&#xff0c;要根据出现该调用时是否已定义了此符号来确定。如果定义了此符号&#xff0c;则执行该调…

小白如何从零开始运营微信公众号?

小白如何从零开始运营微信公众号&#xff1f; 一、公众号定位&#xff0c;名称&#xff0c;头像 第一步公众号定位&#xff0c;最重要。如果你自己都讲不清楚自己是干嘛的&#xff0c;还有谁愿意来关注你呢&#xff1f;无论是旅游攻略还是美妆种草&#xff0c;成长干货还是养生…

软件测试技术lab1 2017.3.13

1.安装Junit和Hamcrest 2. 安装Eclemma 3.三角问题的测试用例 4.测试结果及coverage覆盖 转载于:https://www.cnblogs.com/kale12/p/6543904.html

Fiddler 抓包详细使用教程

主要抓包工具介绍与对比&#xff08;一&#xff09;Fiddler介绍&#xff08;二&#xff09;Fiddler与其他工具对比&#xff08;三&#xff09;工作原理&#xff08;四&#xff09;下载安装&#xff08;五&#xff09;Fiddler界面概述1 主菜单说明2. 快捷菜单说明3.会话列表说明…

如何学习微信公众平台的开发?

如何学习微信公众平台的开发&#xff1f; 在整个移动互联网的开发技术中&#xff0c;微信公众号的开发几乎是成本最低&#xff0c;传播最快&#xff0c;影响最广的&#xff0c;你几乎不需要再添加任何配置&#xff0c;就可以开始。 个人可以申请公众号&#xff0c;需要高级权限…

买房攻略整理

买房需谨慎(一) 买房动机&#xff08;你属于哪一种&#xff1f;&#xff09;(二) 买房心得&#xff08;没了解这些&#xff0c;你就敢买房&#xff1f;&#xff09;1 城市的选择2 首付3 房子区域选择4 小区选择5 户型选择&#xff08;三&#xff09;买房需谨慎&#xff08;先了…

pom.xml配置文件配置jar(不用记,快速配置)

1&#xff1a;网址:http://mvnrepository.com/ 2:在搜索栏搜索要用的框架;例如spring *以下为示例 转载于:https://www.cnblogs.com/kaiwen/p/6545581.html

【转】C++ Vector用法深入剖析

标准库Vector类型 使用需要的头文件&#xff1a; #include <vector> Vector&#xff1a;Vector 是一个类模板。不是一种数据类型。 Vector<int>是一种数据类型。 一、 定义和初始化 Vector<T> v1; //默认构造函数v1为空 Vector<T> v2(v1);//v2是v1的一…

【数据结构1-2】P5076 普通二叉树(简化版)(c++,multiset做法)

文章目录 一、题目【深基16.例7】普通二叉树&#xff08;简化版&#xff09;题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1基本思路&#xff1a; 一、题目 【深基16.例7】普通二叉树&#xff08;简化版&#xff09; 题目描述 您需要写一种数据结构&#xff0c;来维…

C++ ASSERT() 断言机制

C ASSERT() 断言机制 ASSERT()是一个调试程序时经常使用的宏&#xff0c;在程序运行时它计算括号内的表达式&#xff0c;如果表达式为FALSE (0), 程序将报告错误&#xff0c;并终止执行。如果表达式不为0&#xff0c;则继续执行后面的语句。这个宏通常原来判断程序中是否出现了…

HTML中各种 div 位置距离关系

HTML中各种 div 位置距离关系一. 盒模型图片展示&#xff1a;二. 位置距离计算属性三. 应用场景一. 盒模型图片展示&#xff1a; 二. 位置距离计算属性 offsetWidth, offsetHeight 获取盒子的宽度/高度&#xff08;包括盒子的border&#xff0c;padding和内容width/height&…

Docker运行操作系统环境(BusyBoxAlpineDebian/UbuntuCentOS/Fedora)

目前常用的Linux发行版主要包括Debian/Ubuntu系列和CentOS/Fedora系列。前者以自带软件包版本较新而出名&#xff1b;后者则宣称运行更稳定一些。选择哪个操作系统取决于读者的具体需求。同时&#xff0c;社区还推出了完全基于Docker的Linux发行版CoreOS。 使用Docker&#xff…

poj1681 Painter's Problem高斯消元

链接http://poj.org/problem?id1681 View Code 1 #include <stdio.h> 2 #include <string.h>3 #include <algorithm>4 #include <cmath>5 using namespace std;6 int d[230][230], N, M;7 char s[16][16]; 8 void solve( int n)9 { 10 int x[230…

Mac下关于-您不能拷贝项目“”,因为它的名称太长或包括的字符在目的宗卷上无效。-的删除...

打开 Terminal 应用程序。键入&#xff1a; sudo rm -rf注意&#xff1a;在“-rf”后键入一个空格。没有空格该命令将不能执行。在步骤 6 之前请不要按下 Return 键。打开您的“废纸篓”。从“编辑”菜单中选择“全选”。将“废纸篓”中的所有内容都拖到 Terminal 窗口中。这将…

小程序、vue 新闻上下轮播

小程序、vue 新闻上下轮播vue小程序红色部分&#xff1a;相当于放映机&#xff0c;也就是容器&#xff0c;overflow&#xff1a;hidden绿色内容&#xff1a;相当于胶片&#xff0c;也就是domvue vue的核心之一&#xff0c;数据驱动模版&#xff0c;循环播放映射的数据上就是 […

Cogs 376. [IOI2002]任务安排(后效性DP)

[IOI2002]任务安排 ★☆ 输入文件&#xff1a;batch.in 输出文件&#xff1a;batch.out 简单对比 时间限制&#xff1a;1 s 内存限制&#xff1a;128 MB N个任务排成一个序列在一台机器上等待完成&#xff08;顺序不得改变&#xff09;&#xff0c;这N个任务被分成若干批&am…

ajax.actionlink使用问题

突然发现ajax.actionlink调用的方法全是GET方式的&#xff0c;就算制定了POST也不行&#xff0c;Confirm窗口也弹不出来。。。直接StackOverFlow搜索 ajax.actionlink post not work, 出来一堆结果&#xff0c;有的是因为路由参数不对&#xff0c;有的是回调方法不对&#xff…

JAVA Stack栈和Heap堆的区别(转)

首先分清楚Stack&#xff0c;Heap的中文翻译&#xff1a;Stack—栈&#xff0c;Heap—堆。在中文里&#xff0c;Stack可以翻译为“堆栈”&#xff0c;所以我直接查找了计算机术语里面堆和栈开头的词语&#xff1a;堆存储&#xff1a; heapstorage 堆存储分配&#xff1a; he…