创建vue项目(一)搭建vue-cli、项目文件介绍、简单配置

记录一下
拉取项目时 npm run dev 报错
在这里插入图片描述
输入:npm rebuild node-sass 再重新 npm run dev
如果不能解决,请看这里

一、搭建vue-cli

vue create 项目名称
? Please pick a preset:
> default (babel, eslint) //默认
> Manually select features //手动选择功能

在这里插入图片描述
在这里插入图片描述
后面还有一个选项,是否做预设:n
如果做了预设,后面不想要了,可以在 C盘下找到“用户”,然后在搜索框中搜索“.vuerc”,删掉这个 .vuerc 文件就可以了。如果想保留其中几个,则需要用编辑器打开,删除不想要的对象。

二、项目文件介绍

在这里插入图片描述
在这里插入图片描述

三、简单搭建、配置

  1. 为了以后能更好的管理项目的路由和状态管理:
    第1步:src 文件夹下创建一个 routes 文件夹、 stores 文件夹 ;
    第2步: 并将 router.jsstroe.js 分别放入对应文件夹内;
    第3步: 再将原来的router.js 和 stroe.js 都重命名为 index.js;(原因:若为index.js,引入文件时,脚手架可不引入到index.js这一层,它会自动引入index的js文件);
    第4步:main.js 文件中重新引入 router.js 和 store.js 文件;
    在这里插入图片描述
  2. 改造路由
    原路由代码如下:
    在这里插入图片描述
    采用第二种路由方式
    第1步(前期工作): 删除 views 文件夹下自带的的 Home.vueAbout.vue ,并且在 views 文件夹下创建新的文件夹,用来写页面,然后在每个新建的文件夹下新增一个 index.vue 文件。
    在这里插入图片描述
    index.vue
    在这里插入图片描述

第2步(配置路由): 为了不让后期 routers 文件夹下的 index.js 太过复杂,我们在 routers 文件下创建与 views 中一样名字的文件夹,且每个文件夹下新增一个 index.js
在这里插入图片描述
每个 index.js 文件的代码如下:

export default {path : '/workOrder',component : () => import('@/views/workOrder')
}

第3步: 在routers下的 index.js 中引入
在这里插入图片描述
查看是否引入成功: 在地址栏中输入: /文件夹名称 ,看是否出现当前文件夹下 index.vue 的内容
在这里插入图片描述
最终效果:
在这里插入图片描述在这里插入图片描述
下一篇

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

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

相关文章

JPA / Hibernate实体状态转换的初学者指南

介绍 Hibernate将开发人员的思维方式从SQL语句转移到实体状态转换。 一旦实体由Hibernate主动管理,所有更改将自动传播到数据库。 操作域模型实体(及其关联)比编写和维护SQL语句容易得多。 如果没有ORM工具,则添加新列需要修改所…

C# 接收邮件

C#没有内置收邮件的类,参考网络上的代码,针对POP3协议服务器使用 Jmail组件来收邮件,针对IMAP协议服务器使用LumiSoft.Net 。 另外,一般免费邮箱需要在邮箱设置中开启 POP3(或IMAP)、 SMTP服务才可以使用非…

js来监控复制粘贴

平时我们在复制网页上面代码到控制台调试时,有时会出现复制过来的代码后面加上了一下描述信息(作者、版权等信息),每次需要删除才能运行,所以今天看看怎么能保证我们粘贴的代码不携带这些信息呢? (function…

创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件(.vue,js代码等)

下载安装node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共组件 一、引入elementUi 顺便一提axios使用说明 和axios在vue中使用 二、准备静态资源 三、封装.vue公共组件 四、封装.js公共组件 五、封装公共的js代码 六、封装全局的filter、directive等 一、引入…

Spring DI的配置使用

1、 依赖和依赖注入 传统应用程序设计中所说的依赖一般指“类之间的关系”,那先让我们复习一下类之间的关系: 泛化:表示类与类之间的继承关系、接口与接口之间的继承关系; 实现:表示类对接口的实现; 依赖&a…

休眠身份,序列和表(序列)生成器

介绍 在我以前的文章中,我谈到了不同的数据库标识符策略。 这篇文章将比较最常见的替代主要关键策略: 身份 序列 表(序列) 身份 IDENTITY类型(包括在SQL:2003标准中)受以下支持:…

flex pv3d 有用公式

实用公式 统领全书,我们已经有了各种运动和效果的公式。我已经提取出了最实用和最常用的公式、方程、以及代码的摘录,并将它们列在本章的最后。我认为将它们放到同一个地方应该对大家非常有帮助,因此我将这些我认为最需要的内容放到一起作为…

http https http2.0

一.http状态码 1xx(信息性状态码,接受的请求正在处理)2xx(成功状态码,请求正常处理完毕)200 OK204 No Content:请求成功但没有资源返回206 Partial Content:范围请求3xx&#xff08…

创建vue项目(三)路由跳转、反向代理、本地存储、状态管理

数据更新渲染&#xff0c;axios请求数据&#xff0c;配置环境 一、路由跳转 app.vue <template><div id"app"><keep-alive><router-view/></keep-alive></div> </template><script> export default {name: app }…

jinfo:JVM运行时配置的命令行浏览

在最近的几篇博客中&#xff08;特别是在对Java EE 7性能调优和优化以及WildFly性能调优的书的评论中&#xff09;&#xff0c;我引用了自己过去在某些Oracle JDK命令行工具上的博客文章。 令我震惊的是&#xff0c;我从来没有专门解决过漂亮的jinfo工具&#xff0c;这篇文章旨…

javascript---parseInt(08)或parseInt(09)转换返回0的解决办法

javascript parseInt函数使用率非常高&#xff0c;主要功能是将一个string转换为integer。有两个重载&#xff1a; parseInt(s);parseInt(s,radix)第一个方式不再多说&#xff0c;第二个方式&#xff0c;radix是s所基于的进制。范围为2-36&#xff08;不在此范围函数将返回NaN&…

创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节

一、路由相关点 1. 路由跳转传参以及接参 https://segmentfault.com/a/1190000012393587 方法一&#xff1a; &#xff08;1&#xff09; 参数配置&#xff1a; { path : xx/:参数变量,component:xx}(2) 使用 <router-link toxx/参数></router-link>(3) 传参 …

Luogu5298 [PKUWC2018]Minimax

太久没写博客了&#xff0c;过来水一发。感觉自己推式子的功力还不够。。。 题目链接&#xff1a;洛谷 首先我们想到&#xff0c;考虑每个叶节点的权值为根节点权值的概率。首先要将叶节点权值离散化。 假设现在是$x$节点&#xff0c;令$f_i,g_i$分别表示左/右节点的权值$i$的概…

js实现类名的添加与移除

方法1&#xff1a;使用className属性&#xff1b; 方法2&#xff1a;使用classList API&#xff1b; //用于匹配类名存在与否 function reg(name){return new RegExp((^|\\s) name (\\s |$)); }//hasClass addClass removeClass toogleClass var hasClass,addClass,removeCla…

js封装常用函数

自己封装函数时&#xff0c;参数最好不要超过3个&#xff0c;若要超过&#xff0c;可以用数组或者对象&#xff1b; 1. 利用&#xff08;Math.random&#xff09;写指定范围的随机数 2. 补零 3. 数组去重 4. 排序 5. 敏感词过滤 6. 判断数组中是否存在某一条数据&#xff0c;结…

redis学习(一)

1.redis安装&#xff08;来自 https://www.runoob.com/redis/redis-install.html&#xff09; window下安装 下载地址&#xff1a;https://github.com/MSOpenTech/redis/releases。 Redis 支持 32 位和 64 位。这个需要根据你系统平台的实际情况选择&#xff0c;这里我们下载 R…

多项式相加链表

#include <stdio.h> #include <stdlib.h> typedef struct Node //一个项节点 { int modulus; //系数 int cover; //幂 struct Node* next; }List; void creatList(List *&l) //创建多项式链表 { List* r; List* s; int n; l (List*)malloc(sizeof(Node)); r …

JPA教程–在Java SE环境中设置JPA

JPA代表Java Persistence API&#xff0c;它基本上是一个规范&#xff0c;描述了一种将数据持久存储到持久存储&#xff08;通常是数据库&#xff09;中的方法。 我们可以将其视为类似于Hibernate的 ORM工具的东西&#xff0c;除了它是Java EE规范的正式组成部分&#xff08;并…

h5上传图片及预览

第一次做图片上传&#xff0c;记录一些问题。 1&#xff0c;图片的base64编码就是可以将一副图片数据编码成一串字符串&#xff0c;使用该字符串代替图像地址。而网页上的每一个图片&#xff0c;都是需要消耗一个http请求下载而来的&#xff0c;使用base64就不用请求http。 2&a…

JSON(一)

JSON&#xff1a;JavaScript Object Notation(JavaScript 對象表示法&#xff09; JSON是存儲和交換文本信息的語法。類似于XML。 JSON比XML更小&#xff0c;更快&#xff0c;更易解析。 什麼是JSON &#xff1f; JSON指的是JavaScript對象表示法 是輕量級的文本數據交換格式…